Redux with React - 传播不可迭代实例的尝试无效。为了可迭代，非数组对象必须有一个 [Symbol.iterator]() 方法答案

【问题标题】：Redux with React - Invalid attempt to spread non-iterable instance. In order to be iterable, non-array objects must have a [Symbol.iterator]() methodRedux with React - 传播不可迭代实例的尝试无效。为了可迭代，非数组对象必须有一个 [Symbol.iterator]() 方法
【发布时间】：2021-11-22 13:15:35
【问题描述】：

在我的 reducer 文件中，我有一个 shopObject 的初始状态，一个对象数组。

interface Data {
  shopObject: object[],
}

const initialState = {
  shopObject: <Data['shopObject']>[],
};

export default function (state = initialState, action) {
  switch (action.type) {
    case constants.SELECTED_SHOP_ITEM:
      return {
        ...state,
        shopObject: [...state.shopObject, action.payload],
      };
    default:
      return state;
  }
}

目标是将我收到的每个对象（它是一个项目）附加到这个数组中，以便我可以显示购物车中每个项目的列表。发生的问题是当我添加一个项目时应用程序崩溃并出现错误

传播不可迭代实例的尝试无效。为了可迭代，非数组对象必须有一个 Symbol.iterator 方法。

当我console.log(action.payload)我可以看到它确实被成功通过了。

action.payload

{
    "Data": 4,
    "Price": 20,
    "Carrier": "Verizon",
    "Country": "US",
    "Type": "Prepaid",
    "Path": "shop"
}

【问题讨论】：

标签： reactjs typescript redux react-redux

【解决方案1】：

这看起来好像您正在使用 TypeScript（如果正确，请将该标签添加到您的问题中。）

initialState 变量的输入似乎不正确。看起来initialState 应该只实现接口Data，像这样：

const initialState: Data = {
  shopObject: [],
}

您可能还想输入action。 Here's a REPL 演示界面更改。更多来自文档：https://www.typescriptlang.org/docs/handbook/2/objects.html

【讨论】：