时间戳

首页 > 解决方案 > 对象数组上的扩展运算符返回空数组

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

问题描述

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

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

这是过程

  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))
})
  1. 在reducer的时候console.log(action.payload)，正确显示得到的listof_objA
  2. 起初我是这样做的：
case Types.SET_LISTA: {
    console.log(action.payload)
    return {
      ...state,
      listof_objA: action.payload
    }
  }
  1. 哪个正确地将 listof_objA 设置为新值，但由于引用未更改而没有导致重新渲染（从另一个问题中找到）
  2. 所以我把它改成这样：
case Types.SET_LISTA: {
    console.log(action.payload)
    return {
        ...state,
        listof_objA: [...action.payload]
    }
  }
  1. 现在突然 listof_objA 变成了一个空列表！例）[]。action.payload仍然正确显示获得的listof_objA.
  2. 我试过了JSON.parse(JSON.stringify(action.payload))，const newList = [...action.payload]
  3. 但是所有克隆都返回一个空数组。
  4. 我在 redux-logger 中观察到了更多。折叠的操作显示有效负载是Array(0)，但是当它被下拉时显示Array(13) [{...},{...}, ... , {...}]。

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

标签： javascriptasynchronousreduxredux-persist

解决方案

我猜你正在使用 Promise someAsyncFunc，如果是这样，你得到一个空数组的原因是因为你可能没有正确解析你的 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。

希望它有所帮助

推荐阅读