aktualisiert verschachteltes Objekt in Redux Minderer

Question

Ich habe folgendes Minderer:

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; 
    } 
}; 

Ich bin ein wenig Mühe mit einen der in meinem Zustand gespeicherten Objekte verweisen. Das Problem ist mit der Linie:

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

Ich bekomme die folgenden ESLint Error. Ich versuche, ein Element des questionForm Eintrags mit einem Wert zu aktualisieren. Das in questionForm aktualisierte Element wird durch ein Argument entschieden. Das Format scheint falsch zu sein und die Google-Suche hat nicht geholfen.

Beispiel

questionForm.[gender]: 'Male' 

• Dies wird die gender Schlüssel questionForm mit dem Wert 'Male' aktualisieren.

Answer 1

Was würden Sie tun, ist eine andere Ebene der Verschachtelung hinzu:

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

Diese verwendet Spread-Syntax zusammen mit berechneten Eigenschaftsnamen (von ES6) einen Ausdruck als Objektschlüssel zu verwenden.