组件未将数据推送到数组中

Question

我已经为我的项目创建了一个组件，并且出于某种原因，每当将数据推送到数组时数据没有更新。 它只推送一次，并且只执行最后一个对象。 它不会停止循环或跳到最后，所以我不知道是什么导致了它。 格式正确，但数据根本没有推入数组。

这是我的组件https://codesandbox.io/s/stoic-bartik-bh9rc

class Organization extends Component {
  render () {  
   const team = (props) => {
      let arr = [];

      props.props.map((res, key) => {
        let teamName = res.team.replace(/\s+/g, '_').toLowerCase();
        if (Object.keys(arr) !== teamName) {
          arr[teamName] = {};
          arr[teamName]['section_title'] = res.team;
        }
        arr[teamName]['fields'] = res
      });

      return arr;
    }

    return (
      <div className="press-wrapper">
        <Cards data={team(this.props)} multiple={true} />
      </div>
    )
  }
}

这是当前的输出

{
  co_founder: {
    section_title: 'Co Founder',
    fields: [
      { title: "Cl Tre, Co-Founder & COO", team: "Co Founder" },
    ]
  }
},
{
  team_member: {
    section_title: 'Team Member',
    fields: [
      { title: "Team Member", team: "Team Member" },
    ]
  }
},
{
  advisor: {
    section_title: 'Advisor',
    fields: [
      { title: "Team Member", team: "Advisor" },
    ]
  }
}

这是我想要的输出

   {
      co_founder: {
        section_title: 'Co Founder',
        fields: [
          { title: "Ja Ris, Co-Founder & CEO", team: "Co Founder" },
          { title: "Cl Tre, Co-Founder & COO", team: "Co Founder" },
        ]
      }
    },
    {
      team_member: {
        section_title: 'Team Member',
        fields: [
          { title: "Team Member", team: "Team Member" },
          { title: "Team Member", team: "Team Member" },
          { title: "Team Member", team: "Team Member" },
          { title: "Team Member", team: "Team Member" },
          { title: "Team Member", team: "Team Member" },
          { title: "Team Member", team: "Team Member" },
        ]
      }
    },
    {
      advisor: {
        section_title: 'Advisor',
        fields: [
          { title: "Team Member", team: "Advisor" },
          { title: "Team Member", team: "Advisor" },
          { title: "Team Member", team: "Advisor" },
          { title: "Team Member", team: "Advisor" },
          { title: "Team Member", team: "Advisor" },
          { title: "Team Member", team: "Advisor" },
        ]
      }
    },

Answer 1

尝试使用减少来构建基于props的自定义对象。 这样的事情应该有助于获得您想要的输出：

props.reduce((acc, curr) => {
  let teamName = curr.team.replace(/\s+/g, '_').toLowerCase();
  if (!acc[teamName]) {
    acc[teamName] = {};
    acc[teamName].section_title = curr.team;
    acc[teamName].fields = [curr.title];
  }
  else {
    acc[teamName].fields.push(curr.title);
  }
  return acc;
}, {})