TypeError：状态在 React 和 Redux 上不可迭代

Question

所以我刚刚学习了 redux 并尝试使用 redux 和 React 制作一个简单的列表。 但是当我单击按钮将项目添加到列表中时，我收到错误“状态不可迭代”

这是我的代码

减速机

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 };
}

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;
  }
}

Answer 2

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

像这样：

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

不是这样的：

item: [...state,[]]

Answer 3

export const commentReducer = (state = initialState, action) => {
  switch (action.type) {
    case COMMENT_REQUEST:
      return {
        ...state,
        loading: true,
      };
    case COMMENT_SUCCESS:
      return {
        ...state,
        comment: [...state.comment, action.payload],
      };
    case COMMENT_FAIL:
      return { loading: false, error: action.payload };
    default:
      return state;
  }
};

它对我有用

Answer 4

您应该使用

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

因为您只想更改状态中的项目。