[React] 循环中的异步函数 执行useState状态更新不及时;

---

业务场景:

批量新增, 并且回显每一条数据的创建状态;

实现过程

后端新增数据接口每次只能执行一条数据, 对于这种业务接口要支持批量新增业务 我首先想到的解决办法就是在循环中执行async函数, 其次在async函数内部获取state的值 并set;

问题与解决

   loopKeyword.map(
      (keyword: string) => {
        loopCPM.map(
          (cpm: string) => {
            // 同步请求;
            (async () => {
              const res = await addData({
                ...param,
                adSlotName,
                keyword,
                cpm
              });
              if (res && res.records) { 
                /*
                  之前做法 直接读取理想情况下的state值结构赋值进去新值, 调试发现读取的值一直是某个状态下固定的值, 并不是实时更新的;
                  setCraeteStatus([...craeteStatus,res.records]);
                */
                // 改正为 使用更新程序功能利用先前的(上一个)状态
                setCraeteStatus((prevState: any) => {
                  return [...prevState, res.records]
                });
              }
            })();

          })
      });

如果看到这篇小记得大佬有更优雅的解决方法 不妨在评论中指点一二