TypeError: state 在 react 和 redux 上不可迭代

Question

所以我刚刚学习了 redux 并尝试用 redux 制作一个简单的列表并做出反应。但是当我点击按钮将项目添加到列表中时，我得到了一个错误“state is not iterable”

这是我的代码

减速器

function manageList(state = { items: [] }, action) {
  switch (action.type) {
    case ADD_ITEM:
      return { list: [...state, action.payload] };
    case RESET_LIST:
      return {
        item: [...state, []],
      };
    default:
      return state;
  }
}

行动

export const ADD_ITEM = "ADD_ITEM";
export const RESET_LIST = "RESET_LIST";

export function addItem(text) {
  return { type: ADD_ITEM, payload: text };
}

export function resetList() {
  return { type: RESET_LIST };
}

原文由 Dnailsa 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您正在数组内传播一个对象，以解决您应该在数组内传播 items 属性的问题：

 function manageList(state = { items: [] }, action) {
  switch (action.type) {
    case ADD_ITEM:
      return { list: [...state.items, action.payload] };
    case RESET_LIST:
      return {
        items: [...state.items, []],
      };
    default:
      return state;
  }
}

我还认为您应该将 list 和 item 替换为 items ：

 function manageList(state = { items: [] }, action) {
  switch (action.type) {
    case ADD_ITEM:
      return { items: [...state.items, action.payload] };
    case RESET_LIST:
      return {
        items: [...state.items, []],
      };
    default:
      return state;
  }
}

原文由 Boussadjra Brahim 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我认为你应该将它们传播为“state.items”而不仅仅是“state”。

像这样：

 item: [...state.items,[]]

不是这样的：

 item: [...state,[]]

原文由 Moataz Alsayed 发布，翻译遵循 CC BY-SA 4.0 许可协议