javascript - 具有可变索引的深度改变状态

Question

我正在尝试按照 Cleaner/shorter way to update nested state in Redux? 中的说明进行操作[已接受的答案]

在我的特殊情况下，我有一个层，它实际上取决于用户到目前为止选择的模型。我的结构:

现在在我的 reducer 中，我已经尝试过(只想将最喜欢的叶子更改为 true):

let newStateForFavorites = {...state, models: {
            ...state.models,
            62416: {
                ...state.models.62416,
                details: {
                    ...state.models.62416.details,
                    favorited: true
                }
            }
        }};

Javascript 提示。如果我尝试将其提取到 var:

const currentModelToFav = action.payload.model_id;
let newStateForFavorites = {...state, models: {
            ...state.models,
            currentModelToFav: {
                ...state.models.currentModelToFav,
                details: {
                    ...state.models.currentModelToFav.details,
                    favorited: true
                }
            }
        }};

Javascript 不关联 const。它出错了 -currentModelToFav is undefined-

我做错了什么？谢谢!

Answer 1

如果您想使用变量作为属性名称，则必须使用以下构造:

{[variableName] : value}

和

{propertyName : variable[variableName]}

因此，您的对象文字将变为:

const currentModelToFav = action.payload.model_id;
let newStateForFavorites = {...state, models: {
        ...state.models,
       [currentModelToFav]: {
            ...state.models[currentModelToFav],
            details: {
                ...state.models[currentModelToFav].details,
                favorited: true
            }
        }
    }};