如何将对象数组映射到 Redux Slice 中的不同对象（具有不同属性）？

Question

尝试异步过滤和转换我从后端收到的对象数组。我正在使用 Redux 和 React 来管理商店。这是我 slice.js:

中现在的内容

...
export const getData = createAsyncThunk('foo/bar', async (address, thunkAPI) => {
    try {
        //returns an array of objects [{}, {}, ...]
        const allData = JSON.parse(await myService.getAllData(address));
        let newData = [];
        allData.forEach(async (data) => {
           if(*some filtering logic here*) {
               newData.push(await (fetch(data.uri).then(response => response.json())));
           }
        });
        return newData;
    } catch (error) {
        //handle error
    }
});

但是，我的 newData 数组似乎 unpushable/marked 不可扩展。它给出了错误

Uncaught (in promise) TypeError: Cannot add property 0, object is not extensible
    at Array.push (<anonymous>)

这个错误的其他一些解决方案（, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cant_define_property_object_not_extensible）都提到了 React props/editing 状态变量，但我不明白为什么我不能推送到一个空数组 newData.

Answer 1

您不能在 forEach 中执行 async，因此您需要一个普通的旧 for 循环

try {
        const allData = JSON.parse(await myService.getAllData(address));
        const newData = []; // not reassigning, use const
        for (let i = 0, n = allData.length; i < n; ++i) {
          if (*some filtering logic here*) {
            newData.push(await (fetch(data.uri).then(response => response.json())));
          }
        }
        return newData;
    }

这应该有效

Answer 2

嘿，关于你的问题，这里有另一种方法可以实现你想要实现的目标让我知道这是否对你的未来也有帮助

try {
              //returns an array of objects [{}, {}, ...]
              const allData = JSON.parse(await myService.getAllData(address));
              let newData = [];
        // this will be an array of unresolved promises and then you can have them run in parallel with the promise all below
              const promises = allData.map((objectOfData) => fetch(objectOfData.uri))
                
    //this data will be the results
              const  data = Promise.all(promises)
    //do with the data what you want
              data.forEach((item) => {
                if(*some filtering logic here*) {
                   newData.push(item);
               }
    
              })
                return newData;
            } catch (error) {
                //handle error
            }

Answer 3

至于为什么会这样：是时间问题。

由于您在 sub-functions 中启动了异步副作用而没有在主 thunk 函数中等待它们，thunk 在您的任何 fetch 调用解决之前几乎完成了。之后，您将该数据复制到您的商店中 - 它会被冻结，因此之后无法再对其进行修改。

=> 等待所有工作完成。

如何将对象数组映射到 Redux Slice 中的不同对象（具有不同属性）？

How do I map an array of objects to different objects (with different properties) in a Redux Slice?

javascript

reactjs

redux

redux-thunk

react-redux