Recharts PieChart -数组或迭代器中的每个子元素都应该有一个唯一的“键”属性

import React from 'react';
import { PieChart, Pie, Cell } from 'recharts';

const data = [
  { name: 'A', value: 100, key: '1' },
  { name: 'B', value: 200, key: '2' },
  { name: 'C', value: 300, key: '3' },
];

const COLORS = ['#0088FE', '#00C49F', '#FFBB28'];

const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent }) => {
  const RADIAN = Math.PI / 180;
  const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
  const x = cx + radius * Math.cos(-midAngle * RADIAN);
  const y = cy + radius * Math.sin(-midAngle * RADIAN);

  return (
    <text x={x} y={y} fill="white" textAnchor="middle" dominantBaseline="central">
      {`${(percent * 100).toFixed(0)}%`}
    </text>
  );
};

const PieChartExample = () => (
  <PieChart width={400} height={400}>
    <Pie
      data={data}
      dataKey="value"
      nameKey="name"
      cx="50%"
      cy="50%"
      outerRadius={80}
      fill="#8884d8"
      label={renderCustomizedLabel}
    >
      {data.map((entry, index) => (
        <Cell key={`cell-${entry.key}`} fill={COLORS[index % COLORS.length]} />
      ))}
    </Pie>
  </PieChart>
);

export default PieChartExample;