JavaScript中如何从数据数组创建对象并解决push报错问题

错误根因 #

你声明的plots是初始为空的普通对象，没有提前为不同的status值初始化对应数组容器，第一次执行plots[status].push()时，plots[status]的值是undefined，不存在push方法，因此触发类型报错。

修复方案 #

在执行push操作前，先判断plots上是否存在当前status对应的属性，不存在就先赋值为空数组：

makeArrayFilteredPlots = () => {
  let plots = {};
  this.props.filteredPlots.forEach((plot) => {
    const status = plot.entity.status.slug;
    // 新增属性初始化逻辑
    if (!plots[status]) {
      plots[status] = [];
    }
    plots[status].push(plot);
  });
  console.log(plots);
};

可选简化写法 #

也可以用Array.reduce实现相同逻辑，代码更简洁：

makeArrayFilteredPlots = () => {
  const plots = this.props.filteredPlots.reduce((acc, plot) => {
    const status = plot.entity.status.slug;
    acc[status] = acc[status] || [];
    acc[status].push(plot);
    return acc;
  }, {});
  console.log(plots);
};

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