使用Spread Operator向数组添加对象时如何设置动态属性名

你需要使用 ES6 标准提供的计算属性名语法，将作为属性名的动态变量用方括号[]包裹即可，正确写法如下：

const fieldType = 'relationship';
const updatedItemsArr = [...this.state.targetItems, { [fieldType]: value }];

之前写法的问题说明 #

• 写为{fieldType: value}时，JS 会直接将fieldType作为固定的字符串属性名，不会读取该变量对应的实际值，最终得到的对象不符合预期
• 直接将模板字符串写在键的位置{`${fieldType}`: value}属于语法错误，模板字符串作为动态键时也需要配合方括号使用。

旧环境兼容写法 #

如果你的运行环境不支持 ES6 语法，可以通过先创建空对象再动态赋值的方式实现：

const fieldType = 'relationship';
const newItem = {};
// 方括号语法可以传入动态值作为属性名
newItem[fieldType] = value;
const updatedItemsArr = [...this.state.targetItems, newItem];

内容的提问来源于stack exchange，提问作者Muirik