当前位置：首页 > news >正文

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

news 2025/8/17 13:24:45

情景描述

我们有一个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的检测已经过期了，无法触发rerendersetDatasource(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])