在reducer中使用变量作为对象键

Question

我在构建对象时遇到了麻烦。我有一个字符串（在此示例中称为“SKU”），它通过action.name作为action传递。

我在reducer函数中拥有所有可用的内容，但我需要将硬编码的SKU更改为action.name，但显然在JS中不可能。我尝试了action.name、action['name']和其他变体，但我卡住了。

有什么解决方法吗？任何帮助都将不胜感激！谢谢。

这里有一些代码，以便您了解正在发生的情况：

当日期更改时触发的函数...

handleChange(date) {
  this.props.addDate(date, this.props.dashboardName);
}

mapDispatch被连接到组件导出的底部...

const mapDispatchToProps = dispatch => {
  return {
    addDate: (date, name) => dispatch({
      type: 'ACTION_DASHBOARD_ADD_DATE',
      date,
      name
    })
  };
};

action creator...

export function DashboardDate() {
  return {
    type: ACTION_DASHBOARD_ADD_DATE
  };
}

在reducer中的switch语句中的case...

case ACTION_DASHBOARD_ADD_DATE: {
      var filter = {};
      filter[action.name] = action.date;
      return {
        ...state,
        dashboard: {
          ...state.dashboard,
          // Below SKU needs to be the value of action.name
          SKU: {
            // Below too, action.name
            ...state.dashboard.SKU,
            filter
          }
        }
      };
    }

- WillKre

---

我们的任何一个答案有帮到您吗？ - Aron

Answer 1

我不确定你的代码中具体哪里需要出现 sku，但你可以创建一个计算属性名的对象来实现：

const obj = {
    [action.name]: action.payload
};

console.log(obj); // { "sku": "abcd" }

计算属性名是ES2015（ES6）的一个功能。

- Aron

Answer 2

使用[action.name]（计算键的语法）

case ACTION_DASHBOARD_ADD_DATE: {
  var filter = {};
  filter[action.name] = action.date;
  return {
    ...state,
    dashboard: {
      ...state.dashboard,
      [action.name]: {
        ...state.dashboard.SKU,
        filter
      }
    }
  };
}

- Vincent