如何在JavaScript中传递参数作为属性键以更新Redux状态？

嘿，我完全懂你碰到的这个问题——当你想把传入的参数当作对象的属性键时，直接写{ propertyName: imageUri }只会把键名固定成propertyName这个字面量，而不是你实际传的参数值，对吧？这在处理Redux状态更新、尤其是要动态设置不同图片URI的时候确实很闹心，我来给你一步步解决：

核心解决方法：ES6计算属性名 #

ES6引入了计算属性名的语法，只要把你的参数用方括号[]包起来，JavaScript就会把变量的实际值当作属性键，而不是变量名本身。比如：

// 错误写法：键名会变成"propertyName"字面量
const wrongObj = { propertyName: 'image-uri' };

// 正确写法：键名是propertyName变量的值
const correctObj = { [propertyName]: 'image-uri' };

结合Redux状态更新的实际例子 #

假设你要在Redux里动态更新不同图片的URI，比如用户头像、封面图等，你可以这样写reducer和action creator：

1. 编写Reducer #

const imageStateReducer = (state = { avatar: '', cover: '' }, action) => {
  switch (action.type) {
    case 'SET_IMAGE_URI':
      // 用计算属性名动态匹配要更新的属性
      return {
        ...state, // 保持状态不可变，复制原状态的其他属性
        [action.payload.propertyKey]: action.payload.imageUri
      };
    default:
      return state;
  }
};

2. 编写Action Creator #

// 传入要更新的属性名和对应的图片URI
const setImageUri = (propertyKey, imageUri) => ({
  type: 'SET_IMAGE_URI',
  payload: { propertyKey, imageUri }
});

3. 实际调用（比如在组件中） #

// 更新头像的URI
dispatch(setImageUri('avatar', 'https://example.com/user-avatar.jpg'));

// 更新封面图的URI
dispatch(setImageUri('cover', 'https://example.com/cover-photo.png'));

这样调用后，Redux状态里对应的属性就会被正确更新，而不是出现一个叫propertyKey的奇怪键啦。

额外提示 #

• 确保你传入的propertyKey是字符串类型（或者能被隐式转换成字符串的类型，比如数字），不然可能会出现意料之外的键名。
• 在Redux中一定要遵守状态不可变的原则，所以必须用展开运算符...state复制原状态，再覆盖目标属性，不能直接修改原状态对象。

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