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

IT技术 javascript reactjs redux
2021-05-18 08:15:01

我在构建对象时遇到问题。我有一个字符串(在本例中称为“SKU”),它actionaction.name.

我在 reducer 函数中拥有所有可用的东西,但我需要将硬编码更改SKU为 action.name,但显然这在 JS 中是不可能的。我已经尝试过action.nameaction['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
    })
  };
};

动作创造者...

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

减速机开关的情况...

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
          }
        }
      };
    }
2个回答

我不是 100% 确定您希望在代码中的哪个位置sku出现,但是您可以创建一个具有计算属性名称的对象,如下所示:

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

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

计算属性名称是 ES2015 (ES6) 功能。

使用 [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
      }
    }
  };
}