0

使用 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;
    }
  };
4

1 回答 1

3

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

case POST_COMMENTS_NO_DATA:
        return {comments: [], lastKey: null, noData: true};
  case UNMOUNT_POST_COMMENTS:
        return {comments: [], noData: null};
于 2020-04-02T21:12:10.957 回答