如何在react中根据颜色对数据进行分组并求和为相同大小

constructor(props) {
  super(props);
  this.state = {
    data: [
      { color: 'red', value: 5 },
      { color: 'blue', value: 10 },
      { color: 'red', value: 15 },
      { color: 'green', value: 20 },
      // 其他数据...
    ],
    groupedData: [],
  };
}

componentDidMount() {
  this.groupDataByColor();
}

groupDataByColor() {
  const { data } = this.state;
  const groupedData = {};

  data.forEach(item => {
    if (groupedData[item.color]) {
      groupedData[item.color] += item.value;
    } else {
      groupedData[item.color] = item.value;
    }
  });

  this.setState({ groupedData: Object.entries(groupedData) });
}

render() {
  const { groupedData } = this.state;

  return (
    <div>
      {groupedData.map(([color, sum]) => (
        <div key={color}>
          <span>{color}: </span>
          <span>{sum}</span>
        </div>
      ))}
    </div>
  );
}