未分類
17 1 月 2021

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

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

資深大佬 : rexchen94 2

语言：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)

  • 資深大佬 : 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 因为当所有请求全部完成时需要给出提示