Spread operator on array of objects returns empty array

Question

TL;DR: If value is unexpectedly gone or undefined or null etc. go and see the async functions.

There are some questions about spread operator returning "undefined" but in my case I got absolutely nothing.

This is the process

1. Function A is an async function and returns a [listof_objA, listof_objB]
2. After function is evaluated the results are used like .then(([listof_objA, listof_objB])=> { ...so on
3. it is then dispatched dispatch(setListA(listof_objA)) like

someAsyncFunc().then(([listof_objA, listof_objB])=> {
  dispatch(setListA(listof_objA))
  dispatch(setListB(listof_objB))
})

4. In the reducer when console.log(action.payload) , it correctly displays the obtained listof_objA
5. At first I did this:

case Types.SET_LISTA: {
    console.log(action.payload)
    return {
      ...state,
      listof_objA: action.payload
    }
  }

6. Which correctly set the listof_objA to the new value but did not cause a re-rendering because of the reference not changing (Found out from another question)
7. So I changed it to this:

case Types.SET_LISTA: {
    console.log(action.payload)
    return {
        ...state,
        listof_objA: [...action.payload]
    }
  }

8. Now suddenly listof_objA becomes an empty list! Ex) [] . The action.payload still correctly displays the obtained listof_objA .
9. I have tried JSON.parse(JSON.stringify(action.payload)) , const newList = [...action.payload]
10. But all cloning returns an empty array.
11. I observed more in the redux-logger. The collapsed action shows the payload is Array(0) but when dropped down it shows Array(13) [{...},{...}, ... , {...}] .

This is it. I couldn't find any solution. I don't know why this is happening. And it seems it happened only to me. Please help. If you need anymore information please comment. I am working with a company so I can't provide all information. But I'll try my best. Thank you.

Answer 1

I guess you are using a Promise in someAsyncFunc , If so, the reason you get an empty array is because you probably didn't resolved your Promise chain correctly.

The correct Promise chain should look like this:

async function someAsyncFunc() {
    return await fetch('ENDPOINT')
        .then(response => {
            return response.ok
                ? response.json()
                : Promise.reject(Error('Unsuccessful response'));
        })
        .then(([listof_objA, listof_objB]) => {
            dispatch(setListA(listof_objA));
            dispatch(setListB(listof_objB));
        });
}

In order to read the body of the responses JSON. You need to call the response.json() method. The json() method reads the full body of the response and parses the text as a JSON. Since this is another asynchronous operation it returns a promise itself.

Hope that it helps

Answer 2

@jank 回答我希望能解决你的问题，但你可能想看看redux-api-middleware作为一种更简单的 RPC 调用方式，没有所有的承诺。