一个困扰了我 2 天的前端问题咨询

[rexchen94]

语言：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 条数据执行到哪个哪个状态就是成功，会把其他数据的状态给还原成空

[GDC]

弄一个组件用来展示每行数据的状态，比如 Row
把 10 条数据渲染为 10 个 Row，每个 Row 处理自身的 request 和更新自己的状态

[zuiluo]

看了半天才理解...


request 之后请重新读取一次 current state 再进行操作更新就没问题了，而不是读前面的 state

[azcvcza]

既然是同时发请求，为什么不用
``
Promise.all(array.map(val=>{
return new Promise(resolve=>{
return axios.post()
}).then(res=>{
resolve(res);
})
})).then(resAll=>{
// dealWith allResponse
})
``

[rexchen94]

@azcvcza 你这样不能实时更新请求状态的，要等全部请求完成了才会更新

[rexchen94]

@GDC 好主意，但是每个 Row 处理完还要反馈给父元素去做判断是否全部 Row 都完成了

[rexchen94]

@zuiluo 异步执行的，如果是同步那可以读 current state

[zuiluo]

@rexchen94 不管异步或不异步，发出多少请求，最终都是单线程在线性处理，每次都读取 current state，不可能出错。建议 review 一下代码是否有问题

[azcvcza]

那你可能需要一份独立的状态更新了，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 的更新’

[GDC]

@rexchen94 为啥还需要反馈给父组件……

[rexchen94]

@GDC 因为当所有请求全部完成时需要给出提示