[英]Update nested object in 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 };
我收到以下ESLint錯誤 。 我試圖用一個值更新questionForm
表單項的元素。 在questionForm
更新的元素由參數決定。 格式似乎不正確,並且Google搜索沒有幫助。
例
questionForm.[gender]: 'Male'
'Male'
更新questionForm
的gender
關鍵字。 您要做的是添加另一層嵌套:
case UPDATE_QUESTION_FORM:
return {
...state,
questionForm: {
...state.questionForm,
[action.payload.prop]: action.payload.value
}
};
這將使用擴展語法以及計算所得的屬性名稱(來自ES6)來將表達式用作對象鍵。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.