javascript - 如何在对象中使用动态属性

Question

我有一个带有动态参数的handleInputBlur函数。假设我有这样的 this.props.user 对象

{ name: 'abc', age: 10 }

然后在我的 UI 中我可以进行内联编辑，因此 handleInputBlur 将获得一个名为 changeField 的参数，它将是包含更改的字段的对象:

{ age: 10 }

我仍然需要将整个对象传递回后端，如何用现有对象替换更新的字段？

我尝试了此操作，但收到了意外的 token 错误:

handleInputBlur = (changedField) => {

    const existingUser = this.props.user

    const updatedUserObj = Object.assign({}, existingUser, {
        existingUser[changedField]: changedField
    })
}

如何根据 changedField 的键和值更新现有用户？

Answer 1

使用computed property names通过用方括号包围作为表达式的键，以便将其计算值用作键:

const key = Object.keys(changedField)[0];
const updatedUserObj = Object.assign({}, existingUser, {
    [key]: changedField[key]
})

首先，将计算表达式key的值，然后该值将用作键。请注意，Object.keys(changedField)[0] 是 key 的值。其作用是获取 changedField 对象中的第一个键 - 正在更改的属性，例如 'name' 或 'age'。然后，通过访问 changedField 中第一个键的值，将该属性设置为新属性的值。