如何在react中使用foreach显示其他颜色值

Question

下面是示例代码：https://stackblitz.com/edit/react-hook-zwgypv

const SIZES = ['_2x', '_3x', '_4x', 'l', 'm', 's', 'xl', 'xs', 'xxs'];

const data = [
  {
    color: 'red',
    _1x: 0,
    _2x: 12,
    _3x: 0,
    _4x: 0,
    xxs: 0,
    xs: 0,
    s: 0,
    m: 0,
    l: 0,
    xl: 0
  },
  {
    color: 'red',
    _1x: 0,
    _2x: 0,
    _3x: 0,
    _4x: 12,
    xxs: 0,
    xs: 0,
    s: 0,
    m: 0,
    l: 0,
    xl: 0
  },
  {
    color: 'pink',
    _1x: 0,
    _2x: 0,
    _3x: 0,
    _4x: 0,
    xxs: 0,
    xs: 0,
    s: 0,
    m: 0,
    l: 14,
    xl: 0
  },
  {
    color: 'red',
    _1x: 0,
    _2x: 0,
    _3x: 0,
    _4x: 0,
    xxs: 0,
    xs: 0,
    s: 0,
    m: 0,
    l: 14,
    xl: 0
  },
  {
    color: 'pink',
    _1x: 0,
    _2x: 0,
    _3x: 0,
    _4x: 0,
    xxs: 0,
    xs: 0,
    s: 14,
    m: 0,
    l: 0,
    xl: 0
  },
  {
    color: 'yellow',
    _1x: 0,
    _2x: 0,
    _3x: 0,
    _4x: 0,
    xxs: 0,
    xs: 0,
    s: 0,
    m: 0,
    l: 0,
    xl: 12
  }
];
const result = Object.values(
      data.reduce((acc, { color, size, ...rest }) => {
        acc[color] = { color };
        Object.keys(rest).forEach(key => {
          acc[color][key] = (acc[color][key] || 0) + rest[key];
        });
        return acc;
      }, {})
    );

    console.log(result);

如何根据颜色显示其他值？它没有显示其他大小的红色，它将合计相同的大小。我想要做的是显示其他大小的红色。

​

​

此照片中的示例^它将显示_2x的大小，然后将12和9相加等于21

Answer 1

问题出在您的reduce中，您在每次遍历时将acc[color]重置为{ color }，因此它永远不会有以前的值。你只需要在关键点还不存在的第一次设置颜色。你可以在下面更新你的reduce：

const result = Object.values(
  data.reduce((acc, { color, size, ...rest }) => {
    if (!acc.hasOwnProperty(color)) {
      acc[color] = {
        color,
        ...rest
      };
      return acc;
    }

    Object.keys(rest).forEach(key => {
      acc[color][key] = (acc[color][key] || 0) + rest[key];
    });

    return acc;
  }, {})
);

更新的代码示例如下：https://stackblitz.com/edit/react-hook-arh5yz