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

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 调用方式，没有所有的承诺。