Javascript 更新Redux reducer中的嵌套对象

我有以下减速器：

import {
  // QuestionForm
  UPDATE_QUESTION_FORM,
  // FoodPreferenceList
  UPDATE_FOOD_PREFERENCE,
  UPDATE_NUMBER_OF_MEALS
} from '../actions/types';

const INITIAL_STATE = {
  setupComplete: false,
  error: '',
  loading: false,
  // QuestionForm
  questionForm: {
    gender: 'Female',
    age: '35',
    weight: '75',
    height: '175',
    activityLevel: '1.2',
    goal: '100',
    maintenanceCalories: '',
    goalCalories: '',
  },
  // FoodPreferenceList
  selectedFoodsArrays: [],
  numberOfMeals: '1'
};

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    // QuestionForm
    case UPDATE_QUESTION_FORM:
      return { ...state, questionForm.[action.payload.prop]: action.payload.value };
    // FoodPreferenceList
    case UPDATE_FOOD_PREFERENCE:
      return { ...state, selectedFoodsArrays: action.payload };
    case UPDATE_NUMBER_OF_MEALS:
      return { ...state, numberOfMeals: action.payload };
    // DEFAULT
    default:
      return state;
  }
};

我在引用存储在我的状态中的一个对象时遇到了一些问题。问题在于线路：

case UPDATE_QUESTION_FORM:
  return { ...state, questionForm.[action.payload.prop]: action.payload.value };

我得到以下信息。我试图用一个值更新

questionForm

条目的一个元素。

questionForm

中更新的元素由参数决定。格式似乎不正确，谷歌搜索也没有帮助

示例

questionForm.[gender]: 'Male'

• 这将使用

  值“男性”

  更新

  问题表单的
  性别
  键

---

您要做的是添加另一层嵌套：

case UPDATE_QUESTION_FORM:
  return { 
    ...state, 
    questionForm: {
      ...state.questionForm,
      [action.payload.prop]: action.payload.value 
    }
  };

---

这使用扩展语法和计算属性名（来自ES6）将表达式用作对象键。

首先复制原始状态，然后更新新状态并返回，这样可以吗？@nareshtel当然可以。请注意，spread语法不能进行深层克隆，只能进行浅层克隆。