ReactJS项目中Recharts饼图通过Props传值显示异常问题排查

问题根源分析 #

• Props名称拼写错误：父组件传递的属性是chartData，但Chart子组件中误写为charData，导致组件无法稳定接收父组件传递的选中设备数据，仅当默认空数组生效时才会有基础渲染，表现为显示时有时无。
• Pie图表数据格式不匹配：Recharts的Pie组件要求data为带键值对的对象数组，当前代码直接提取location字符串组成数组，且dataKey指定的"locations"在字符串中不存在，导致图表无法正确解析数据。

修复后的代码 #

1. 修正Chart组件的Props名称与数据格式 #

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

const Chart = ({ chartData = [] }) => {
  // 统计各Location的出现次数，生成Pie组件兼容的数据格式
  const locationCounts = chartData.reduce((acc, device) => {
    const loc = device.location;
    acc[loc] = (acc[loc] || 0) + 1;
    return acc;
  }, {});

  // 转换为Pie组件需要的对象数组
  const pieData = Object.entries(locationCounts).map(([name, value]) => ({
    name,
    value
  }));

  return (
    <PieChart width={700} height={700}>
      <Pie
        data={pieData}
        dataKey="value" // 对应统计后的次数字段
        nameKey="name" // 对应Location名称字段
        outerRadius={250}
      >
        {/* 可选：给不同Location设置差异化颜色 */}
        {pieData.map((entry, index) => (
          <Cell key={`cell-${index}`} fill={['#0088FE', '#00C49F', '#FFBB28', '#FF8042'][index % 4]} />
        ))}
      </Pie>
    </PieChart>
  );
};

export default Chart;

2. 可选优化：父组件初始选中逻辑 #

父组件中selected初始值为undefined，首次渲染时deviceMap.get(selected)会返回undefined，可优化初始选中逻辑避免无效渲染：

// 在Devdropdown组件中修改状态与数据加载逻辑
const [selected, setSelected] = useState(null);

useEffect(() => {
  async function getDevices() {
    const response = await fetch(url);
    const body = await response.json();
    setDevices(body.data);
    // 数据加载完成后默认选中第一个设备
    if (body.data.length > 0) {
      setSelected(body.data[0].device_id);
    }
  }
  getDevices();
}, []);

修复说明 #

• 修正Props拼写错误后，Chart组件可稳定接收父组件传递的选中设备数据；
• 通过reduce统计Location出现次数并转换为Pie组件要求的格式，确保图表能正确解析渲染；
• 可选添加Cell组件实现不同地点的颜色区分，提升可视化效果。

内容的提问来源于stack exchange，提问作者Ankan Chanda