【react hook】在react hook组件中，使用Antd Table组件，columns数据异步获取，list数据更新但没有rerender解决办法

情景描述

我们有一个react组件，显示了一个Antd Table组件，设置了一个columns变量并复制给Table的columns属性，由于我们请求的datasource来源是异步的，示例伪代码如下：

const [columns, setColumns] = useState([]); // 注意columns放在全局直接定义，是无法通过依赖提醒react进行rerender的！！！已尝试使用useMemo包裹全局的columns进而触发依赖更新的计划失败。
const [datasource, setDatasource] = useState([]);

useEffect(() => {
	// 假设这边是一个请求列表数据的promise.then回调的伪代码
	promise.then(res) => {
		let list = JSON.parse(JSON.stringify(res.list));
		// 数据格式如下注释：
		// list = [
		// 	a: [
		//		{ key: 'address', value: '广东省汕头市', lng: 114.12, lat: 68.33 }
		//	],
		//	b: 1,
		//	c: 2,
		// ];
		这边做一些异步操作async/await...
		// list 中的a数组的每个元素的地址value需要根据高德地图API转换成特定国际化语言环境，比如中文转英文，这个时候就需要异步调用逆编码根据经纬度获取英文地址了，这个过程是异步且耗费时间的，当react同步代码执行完毕后，数据仍旧过了200ms才返回，这时react的检测已经过期了，无法触发rerender
		setDatasource(list);
	}
}, [])

useEffect(() => {
	setColumns([
		{
			key: 'address',
			...
			render: (text, row) => {
				// 这边的数据依赖于res.list的数据进行异步映射赋值加工后返回的
			}
		},
		// ...省略
	]);
}, [datasource])

其中，a属性是一个数组，这意味着无法在第二个useEffect中直接指定datasource作为依赖项，因为它是浅比较的，需要使用JSON.stringify(datasource)作为依赖，检测字符串长度是否发现变化。

并且因为以上的案例，我们发现数据虽然打印出来更新了，但是却没有触发rerender，导致columns的数据仍旧是上一次的，最蠢的办法是用setTimeout延迟设置，但是这样准确性低，所以这时，我们需要再增加一个状态，用来提示更新。

因此，修改后代码如下：

const [needRefresh, setNeedRefresh] = useState('');

		// 假设以下代码是如上代码的异步操作详情，那么setNeedRefresh将再循环的最后一次进行标记，标记所有项的异步数据都获取并设置成功了。
		const arr = [];
		draftAbstract.forEach(async (t, i) => {
            const addr = await getSearchAddressByLang(itemData.longitude, itemData.latitude, addr);
            values = addr || itemData?.address;
			t.itemValue = values;
            arr.push(t);
            // 地址全部计算完成，设置异步完成标记，
            // 将needRefresh设置为columns需要更新的依赖项，避免同步检测时因异步结果没有得到时无法正确渲染
            if (i + 1 === draftAbstract.length) {
              setNeedRefresh(new Date().getTime());
            }
        });

useEffect(() => {
	setColumns([
		{
			key: 'address',
			...
			render: (text, row) => {
				// 这边的数据依赖于res.list的数据进行异步映射赋值加工后返回的
			}
		},
		// ...省略
	]);
}, [JSON.stringify(datasource), needRefresh])