这是一个创建于 1397 天前的主题，其中的信息可能已经有所发展或是发生改变。
语言：React
业务场景：有一张表格，表格里一行数据代表将要发起一次请求。打个比方有 10 条数据，现在要异步同时发起这 10 个请求，每个请求完成后更新表格中对应数据的 loading 状态，success 状态和 fail 状态。
当前的写法：
表格数据是 data，stack[]中有 10 个请求参数，stack.map(params=>request(params) ;
request 函数： (params) => {
const temp = [...data];
const index = temp.findIndex(row => row.id === params.id);
temp.splice(index,1,{...temp[index],...{status:'loading'}});
setData(temp);
axios(params).then( // 利用 splice 同样将 status 改成 success 然后 setData ) }))
问题点：表格视图上状态不能成功更新，每次状态更新都会覆盖上一次的数据，导致表格里 10 条数据执行到哪个哪个状态就是成功，会把其他数据的状态给还原成空
业务场景：有一张表格，表格里一行数据代表将要发起一次请求。打个比方有 10 条数据，现在要异步同时发起这 10 个请求，每个请求完成后更新表格中对应数据的 loading 状态，success 状态和 fail 状态。
当前的写法：
表格数据是 data，stack[]中有 10 个请求参数，stack.map(params=>request(params) ;
request 函数： (params) => {
const temp = [...data];
const index = temp.findIndex(row => row.id === params.id);
temp.splice(index,1,{...temp[index],...{status:'loading'}});
setData(temp);
axios(params).then( // 利用 splice 同样将 status 改成 success 然后 setData ) }))
问题点：表格视图上状态不能成功更新，每次状态更新都会覆盖上一次的数据，导致表格里 10 条数据执行到哪个哪个状态就是成功，会把其他数据的状态给还原成空
 |
1
GDC 2021-01-27 16:36:04 +08:00
弄一个组件用来展示每行数据的状态，比如 Row
把 10 条数据渲染为 10 个 Row，每个 Row 处理自身的 request 和更新自己的状态 |
 |
2
zuiluo 2021-01-27 16:37:31 +08:00
看了半天才理解...
request 之后请重新读取一次 current state 再进行操作更新就没问题了，而不是读前面的 state |
 |
3
azcvcza 2021-01-28 11:10:47 +08:00
既然是同时发请求，为什么不用
`` Promise.all(array.map(val=>{ return new Promise(resolve=>{ return axios.post() }).then(res=>{ resolve(res); }) })).then(resAll=>{ // dealWith allResponse }) `` |
|
7
zuiluo 2021-01-28 11:58:36 +08:00
@rexchen94 不管异步或不异步，发出多少请求，最终都是单线程在线性处理，每次都读取 current state，不可能出错。建议 review 一下代码是否有问题
|
|
8
azcvcza 2021-01-28 14:01:16 +08:00
那你可能需要一份独立的状态更新了，class component 一般是挂在 this.xxx 上，fc 则是用 useRef 。class component 还有 this.setState(state, callback),在 callback 里拿到最新的 state，fc 里没有，碰到这种问题，好像 dan abramov 建议是优化成用 useReducer 来更新状态，可以参考一下官网例子或者 dan 的 blog，https://overreacted.io/zh-hans/a-complete-guide-to-useeffect/ 子标题为‘解耦来自 Actions 的更新’
|
Select Language