对象数组上的扩展运算符返回空数组答案

【问题标题】：Spread operator on array of objects returns empty array对象数组上的扩展运算符返回空数组
【发布时间】：2019-12-04 03:57:47
【问题描述】：

TL;DR：如果值意外消失、未定义或 null 等，请查看异步函数。

有一些关于传播运算符返回“未定义”的问题，但就我而言，我一无所获。

这是过程

函数 A 是一个异步函数并返回一个[listof_objA, listof_objB]
评估函数后，结果将像.then(([listof_objA, listof_objB])=> { ...so on一样使用
然后发送dispatch(setListA(listof_objA))like

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

在reducer中console.log(action.payload)时，正确显示得到的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]
但所有克隆都返回一个空数组。
我在 redux-logger 中观察到了更多。折叠的操作显示有效负载为 Array(0)，但下拉后显示为 Array(13) [{...},{...}, ... , {...}]。

就是这样。我找不到任何解决方案。我不知道为什么会这样。它似乎只发生在我身上。请帮忙。如果您需要更多信息，请发表评论。我在一家公司工作，所以我无法提供所有信息。但我会尽力而为。谢谢。

【问题讨论】：

你在哪里写调度是我唯一的问题？是在承诺的.then 内调度还是在该承诺之外调度，这会让我更了解这种行为
@pavankumar 我已经更新了这个问题。请看下面的索引 3。谢谢。
好吧，为什么变量 listof_... 包裹在 [] 周围？并尝试在发送前做console.log 并让我知道
我不得不从异步函数返回两个列表。所以我把两个列表都放在一个列表中，因为你不能在 JS 中返回多个变量。 listof_objA and B 在分派之前都正确地具有预期的对象列表。仅当我尝试复制列表时，这些值才会消失。
理想情况下它不应该那样返回，但如果你有一个可重现的例子，也许我可以帮助你......

标签： javascript asynchronous redux redux-persist

【解决方案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。由于这是另一个异步操作，因此它本身会返回一个 Promise。

希望对你有帮助

【讨论】：

【解决方案2】：

@jank 回答我希望可以解决您的问题，但您可能希望将redux-api-middleware 视为一种更简单的 RPC 调用方式，无需所有承诺。

【讨论】：