对象数组 returns 空数组上的展开运算符

Question

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

有一些关于传播运算符返回 "undefined" 的问题，但在我的情况下，我一无所获。

这是过程

函数A是一个异步函数并且returns一个[listof_objA, listof_objB]
函数求值后的结果像.then(([listof_objA, listof_objB])=> { ...so on
然后像

dispatch(setListA(listof_objA))

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

在console.log(action.payload)时的reducer中，正确显示得到listof_objA
起初我是这样做的：

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

正确地将 listof_objA 设置为新值但由于引用未更改而没有导致重新渲染（从另一个问题中发现）
所以我改成这样：

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

现在突然listof_objA变成了一个空列表！例如）[]。 action.payload 仍然正确显示获得的 listof_objA.
我试过了JSON.parse(JSON.stringify(action.payload)),const newList = [...action.payload]
但所有克隆returns一个空数组。
我在 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。由于这是另一个异步操作，它 returns 本身就是一个承诺。

希望对你有帮助

Answer 2

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

对象数组 returns 空数组上的展开运算符

Spread operator on array of objects returns empty array

javascript

asynchronous

redux

redux-persist