React + Recharts Barchart 未正确分组

如何解决React + Recharts Barchart 未正确分组

一段时间以来，我一直试图在 Recharts 中对我的数据进行分组。与此同时，我已经正确格式化了数据（此处显示的数据是虚拟数据），但它仍然向我显示了错误行中的 BarChart。工具提示奇怪地正确呈现。

const data = [
  {
    name: "Series 1",keys: [
      { keyName: "Key A",base: { Unit1: { value1: 400 } } },{ keyName: "Key B",base: { Unit1: { value1: 200 } } }
    ]
  },{
    name: "Series 2",keys: [{ keyName: "Key B",base: { Unit1: { value1: 300 } } }]
  }
];

const color = ["#8884d8","black"];

export default function App() {
  return (
    <BarChart
      width={500}
      height={300}
      data={data}
      margin={{
        top: 5,right: 30,left: 20,bottom: 5
      }}
    >
      <Cartesiangrid strokeDasharray="3 3" />
      <XAxis dataKey="keyName" allowDuplicatedCategory={false} />
      <YAxis />
      <Tooltip />
      <Legend />
      {data.map((s,i) => (
        <Bar
          dataKey="base[Unit1].value1"
          data={s.keys}
          name={s.name}
          fill={color[i]}
        />
      ))}
    </BarChart>
  );
}

The Shown Tooltip > 这是格式正确的工具提示，但栏未正确呈现

有人知道解决办法吗？