如何在Recharts带指针饼图中展示动态能耗数据？

错误原因 #

你遇到的TypeError: Cannot read properties of undefined (reading 'map')，本质就是你调用map方法的conData变量是undefined，通常触发场景有两种：

• Meter组件首次渲染时，还没拿到父组件传递的avgConsumptionData，此时用于遍历的变量为空；
• 从states.json提取对应州的能耗数据时路径错误，导致avgConsumptionData本身就是undefined，传递给Meter后自然无法调用map。

数据传递方式是否正确？ #

核心传递逻辑（Calculation选州后把对应数据传给Meter）是没问题的，但可能在数据初始化、数据提取细节上有疏漏：

• 比如Calculation组件的初始选中值对应的州，在states.json里没有有效的能耗数据，导致传给Meter的是undefined；
• 或者你从states.json的州对象里取avgConsumptionData时，字段名写错（比如实际是avgConsumption而非avgConsumptionData），导致拿到的是空值。

可行解决办法 #

1. 给数据加默认值，避免空值遍历 #

在Meter组件里，要么接收props时给avgConsumptionData设默认空数组，要么在调用map前做判断：

// 方式1：接收props时设默认值
const Meter = ({ avgConsumptionData = [] }) => {
  return (
    // 直接用avgConsumptionData.map(...)
  )
}

// 方式2：map前加可选链和默认值
avgConsumptionData?.map(item => /* 渲染逻辑 */) || []

2. 检查数据提取逻辑 #

在Calculation组件里，选中州后打印拿到的avgConsumptionData，确认它是预期的数组：

// Calculation组件中选中州的处理逻辑
const handleStateChange = (selectedState) => {
  const stateData = states.find(state => state.name === selectedState);
  console.log('选中州的能耗数据：', stateData?.avgConsumptionData); // 查看输出是否为数组
  setAvgConsumptionData(stateData?.avgConsumptionData || []);
}

如果打印结果是undefined，说明你从states.json取数据的字段名或查找逻辑有误，需要核对JSON文件的结构。

3. 处理初始渲染的空状态 #

如果Calculation组件初始没有选中任何州，或者初始选中的州没有数据，给avgConsumptionData设初始空数组：

// Calculation组件的状态初始化
const [avgConsumptionData, setAvgConsumptionData] = useState([]);

这样Meter组件首次渲染时拿到的是空数组，map不会报错。

4. 处理异步加载场景（如果适用） #

如果states.json是通过fetch异步加载的，要加上加载状态判断，避免在数据未加载完成时渲染Meter组件：

// Calculation组件里
const [states, setStates] = useState([]);
const [isLoading, setIsLoading] = useState(true);

useEffect(() => {
  fetch('/states.json')
    .then(res => res.json())
    .then(data => {
      setStates(data);
      setIsLoading(false);
    });
}, []);

// 渲染时
if (isLoading) return <div>加载中...</div>;
return (
  // 下拉框和Meter组件
);

内容的提问来源于stack exchange，提问作者raiyan khan