如何将 map 对象数组转换为 Redux Slice 中的不同对象（具有不同属性）？

Question

Trying to asynchronously filter and transform an array of objects that I receive from my backend. I'm using Redux with React to manage store. Here's what I have now in my 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
    }
});

However, my newData array seems to be unpushable/marked as unextensible. It gives the error

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

Some of the other solutions to this error ( React: cannot add property 'X', object is not extensible , https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cant_define_property_object_not_extensible ) all mention React props/editing state variables, but I can't figure out why I cannot push to an empty array newData .

Answer 1

You cannot do async in forEach , so you need a plain old for loop

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;
    }

This should work

Answer 2

Hey There so with regards to your question here is another way you could achieve what you are looking to achieve let me know if this helps you out for future too maybe

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

As for why this happens: it's a timing issue.

Since you started the asynchronous side effect in sub-functions without ever awaiting them in the main thunk function, the thunk pretty much finished before anything of your fetch calls resolved. After that, you are copying that data into your store - and it gets frozen, so after that it cannot be modified any more.

=> wait in your thunk until actually all work is done.