javascript - Redux - 将项目添加到数组时连接新状态时出现问题

Question

目前我的 reducer 函数存在问题，它不会更新 questionList.items 数组。我不太确定我在这里做错了什么，所以如果有人能指出我正确的方向，那就太好了:)

下面是我遇到问题的代码片段。我的问题在于我的 ADD_QUESTIONS 操作，因为它不会将数组中的现有项目与新项目连接起来。相反，它会覆盖数组中的现有项目。

const ADD_QUESTION = 'ADD_QUESTION';
const FETCH_QUESTIONS = 'FETCH_QUESTIONS';
const FETCH_QUESTIONS_SUCCESS = 'FETCH_QUESTIONS_SUCCESS';
const FETCH_QUESTIONS_FAILURE = 'FETCH_QUESTIONS_FAILURE';

const INITIAL_STATE = { 
  questionsList: {items: [{
    id: 2222,
    questionString: 'your name',
    rejected: true
  }], error:null, loading: false},
    newQuestion:{question:null, error: null, loading: false}, 
    activeQuestion:{question:null, error:null, loading: false}, 
    deletedQuestion: {question: null, error:null, loading: false},
};

const questionsReducer = (state = INITIAL_STATE, action) => {
  const { payload, type } = action;
  switch (type) {
  case FETCH_QUESTIONS:
      return { ...state, questionsList: {items:[], error: null, loading: true} }; 
    case FETCH_QUESTIONS_SUCCESS:
      return { ...state, questionsList: {items: action.payload, error:null, loading: false} };
    case ADD_QUESTION:
      /** PROBLEM LIES HERE */ 
      return { ...state, questionsList: { items: [...state, payload], error: null, loading: false } }
    default: return state
  }
}

export default questionsReducer;

我截取了 redux devtools 控制台的屏幕截图，希望能更好地显示我正在处理的问题。通过查看下图，您将看到当 ADD_QUESTION 触发时，items 数组中的初始项被替换。

Answer 1

您试图传播您的整个状态，而不仅仅是问题列表:

return { ...state, questionsList: { items: [...state, payload], error: null, loading: false } }

您不能将对象分散到数组中。相反，仅传播状态的相关部分:

return { ...state, questionsList: { items: [...state.questionsList.items, payload], error: null, loading: false } }