哪些企业网站使用水墨风格,郑州中原区最新消息,网站结构分析怎么做,网站建设的需要是什么情景描述
我们有一个react组件#xff0c;显示了一个Antd Table组件#xff0c;设置了一个columns变量并复制给Table的columns属性#xff0c;由于我们请求的datasource来源是异步的#xff0c;示例伪代码如下#xff1a;
const [columns, setColumns] useState([]); /…情景描述
我们有一个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])
