Redux 将对象添加到数组，但仅适用于第一条记录

Question

使用 Redux 将对象添加到数组时，由于某些原因添加第一条记录不起作用。

我会得到以下错误：

TypeError: Invalid attempt to spread non-iterable instance. in order to be iterable, non-array objects must have a [Symbolic.iterator]()method.

使用此代码：

case POST_COMMENTS_ADD:
  return {
    ...state,
    comments: [...state.comments, action.newItem[0]],
    lastKey: null,
    noData: null,
  };

我想了解为什么这种方法在我认为应该有效的时候却不起作用。

以下是我设法添加的方法（第一条记录没有错误 - 所有后续添加都使用初始代码正常工作）

case POST_COMMENTS_ADD:
  return {
    ...state,
    comments: !state.comments ? [action.newItem[0]] : [...state.comments, action.newItem[0]],
    lastKey: null,
    noData: null,
  };

修复有效，但我想看看第一种方法哪里出了问题。

这是我的整个减速器：

  import {
    POST_COMMENTS_FETCH_SUCCESS,
    POST_COMMENTS_NO_DATA,
    UNMOUNT_POST_COMMENTS,
    POST_COMMENTS_ADD,
  } from '../actions/types';

  const INITIAL_STATE = {
    comments: [],
  };

  export default (state = INITIAL_STATE, action) => {
    switch (action.type) {
      case POST_COMMENTS_FETCH_SUCCESS:
        return {comments: action.payload, lastKey: action.key, noData: null};
      case POST_COMMENTS_NO_DATA:
        return {comments: null, lastKey: null, noData: true};
      case POST_COMMENTS_ADD:
        return {
          ...state,
          comments: !state.comments ? [action.newItem[0]] : [action.newItem[0], ...state.comments],
          lastKey: null,
          noData: null,
        };
      case UNMOUNT_POST_COMMENTS:
        return {comments: null, noData: null};
      default:
        return state;
    }
  };

Answer 1

您的默认 initialState 似乎很好，但我们可以看到在几个操作（POST_COMMENTS_NO_DATA 和 UNMOUNT_POST_COMMENTS）中您将注释设置为 null。相反，它应该设置为 []。因此，即使状态是用 [] 的注释初始化的，它后来也被更改为 null，因为这些操作中的任何一个在 POST_COMMENTS_ADD

之前被触发

case POST_COMMENTS_NO_DATA:
        return {comments: [], lastKey: null, noData: true};
  case UNMOUNT_POST_COMMENTS:
        return {comments: [], noData: null};

Redux 将对象添加到数组，但仅适用于第一条记录

Redux adding an object to an array not working for the first record only

reactjs

react-native

redux

redux-reducers