對象數組上的擴展運算符返回空數組

Question

TL;DR：如果值意外消失或未定義或為空等，請查看異步函數。

有一些關於傳播運算符返回“未定義”的問題，但在我的情況下，我完全沒有得到任何信息。

這是過程

1. 函數 A 是一個異步函數並返回一個[listof_objA, listof_objB]
2. 函數被評估后，結果像這樣使用.then(([listof_objA, listof_objB])=> { ...so on
3. 然后分派dispatch(setListA(listof_objA))像

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

4. 在reducer中console.log(action.payload) ，正確顯示獲取到的listof_objA
5. 起初我是這樣做的：

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

6. 哪個正確地將 listof_objA 設置為新值，但由於引用沒有改變而沒有導致重新渲染（從另一個問題中發現）
7. 所以我把它改成了這樣：

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

8. 現在突然 listof_objA 變成了一個空列表！ 例如) [] 。 action.payload仍然正確顯示獲得的listof_objA 。
9. 我試過JSON.parse(JSON.stringify(action.payload)) , const newList = [...action.payload]
10. 但所有克隆都返回一個空數組。
11. 我在 redux-logger 中觀察到了更多。 折疊的動作顯示有效載荷是Array(0)但當下拉時它顯示Array(13) [{...},{...}, ... , {...}] 。

就是這個。 我找不到任何解決方案。 我不知道為什么會這樣。 而且似乎只發生在我身上。 請幫忙。 如果您需要更多信息，請發表評論。 我在一家公司工作，所以我不能提供所有信息。 但我會盡力的。 謝謝你。

Answer 1

我猜你在someAsyncFunc中使用了一個 Promise ，如果是這樣，你得到一個空數組的原因是因為你可能沒有正確解析你的 Promise 鏈。

正確的 Promise 鏈應如下所示：

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

為了讀取響應 JSON 的正文。 您需要調用 response.json() 方法。 json() 方法讀取響應的完整正文並將文本解析為 JSON。 由於這是另一個異步操作，它本身返回一個承諾。

希望它有幫助

Answer 2

@jank 回答我希望能解決你的問題，但你可能想看看redux-api-middleware作為一種更簡單的 RPC 調用方式，沒有所有的承諾。