对象扩展运算符：设置要通过有效负载更新的属性[重复]

Question

代码sn-p：

updateSelectedAreaColor: (state, payload) => {
state.selectedArea = { ...state.selectedArea, color: payload };
},

我正在使用有效负载更新对象 state.selectedArea 的属性 color。我不想硬编码要更新的属性，而是想通过我的 payload 设置属性。
例如：

updateSelectedAreaColor: (state, payload) => {
state.selectedArea = { ...state.selectedArea, payload.target: payload.value };
},

但是，此代码会引发错误。有谁知道我如何设置要通过有效负载更新的值？

Answer 1

动态属性放在括号中：

 updateSelectedAreaColor: (state, payload) => {
    state.selectedArea = { ...state.selectedArea, [payload.target]: payload.value };
 },

不过我更喜欢：

 updateSelectedAreaColor: (state, payload) => {
   state.selectedArea = { ...state.selectedArea,  ...payload};
 },

这样，您可以轻松地同时更改多个道具：

 updateSelectedAreaColor(this.state, { color: "green", backgroundColor: "red" });