如何在Object.assign中使用变量作为属性键？Redux Action开发问题

首先，你遇到的核心问题是：在对象字面量里直接写filterName作为属性键时，JavaScript会把它当成**固定字符串"filterName"**处理，而不是读取变量filterName里存储的实际属性名。这就是固定属性名能用、变量作为键名却失效的原因。

解决方案：使用方括号语法 #

要让变量作为动态属性键生效，你需要用ES6的方括号语法[filterName]，这样JS会自动计算变量的值，把它作为真正的属性键。下面是修改后的完整代码：

export const set_stl = (val, filterName, chosenLayerId, chosenLayerIdx = 0, layers) => {
  const specLayer = layers[chosenLayerIdx];
  const assignedSpecLayer = Object.assign({}, specLayer, {
    stl: {
      ...specLayer.stl,
      [filterName]: val // 这里改用方括号语法，读取变量值作为键名
    }
  });
  // 注意：原代码直接赋值会修改原数组，Redux要求状态不可变，所以要创建数组副本
  const newLayers = [...layers]; // 用扩展运算符浅拷贝原数组
  newLayers[chosenLayerIdx] = assignedSpecLayer;
  
  return dispatch => {
    dispatch({
      type: SET_STL,
      payload: newLayers,
    });
  };
};

额外优化点：避免修改原数组 #

原代码里const newLayers = layers;只是复制了数组的引用，修改newLayers的同时会直接改动原layers数组，这不符合Redux状态不可变的原则。上面的代码用[...layers]创建了原数组的浅拷贝，保证了状态的纯净性。

另一种写法（可选） #

如果你不习惯在对象字面量里混用扩展运算符和方括号，也可以拆分步骤实现：

const updatedStl = { ...specLayer.stl };
updatedStl[filterName] = val; // 直接给动态键赋值
const assignedSpecLayer = Object.assign({}, specLayer, { stl: updatedStl });

两种写法效果完全一致，选你觉得更易读的就行。

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