ReactJS使用Recharts时接口返回数据无法正常渲染问题

• 初始状态类型不符合Recharts要求：你通过useState(null)将图表数据的初始值设置为null，组件首次挂载渲染时，BarChart组件接收到的数据源是null而非预期的数组类型。Recharts内部初始化逻辑在首次接收到非数组格式的数据源时，不会正确绑定后续数据变更的重绘触发逻辑，即使后续接口请求完成更新了state，图表也无法正常渲染更新后的数据。
• 接口返回值取值路径可能错误：你代码中使用setData(resp.data.message)赋值，但你贴出的接口返回结构是直接的经销商统计数组，没有外层包裹message字段。如果接口实际返回结构和示例一致，resp.data.message会是undefined，传给图表的始终是无效值。

按以下要点调整代码即可：

1. 将data的初始值从null改为空数组[]，保证组件首次渲染时传入BarChart的数据源始终是数组类型，让Recharts正确初始化重绘逻辑
2. 核对接口实际返回结构，调整取值路径：如果接口返回的数组直接挂载在resp.data下，就将赋值语句改为setData(resp.data)；如果数组确实包裹在resp.data.message字段中，保留原有取值逻辑即可
3. 可选优化：增加加载状态，避免数据请求阶段显示空白图表

修复后的完整参考代码：

import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
import React, { useEffect, useState } from "react";
import axios from "axios";

const Chart = () => {
  // 初始值改为空数组，匹配Recharts要求的数据源类型
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    axios.get("http://127.0.0.1:8000/fail-count")
      .then((resp) => {
        console.log(resp.data)
        // 按实际接口结构调整取值，示例接口直接返回数组时用resp.data
        setData(resp.data);
        setLoading(false);
      })
      .catch(err => {
        console.error('图表数据请求失败:', err);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <div>图表数据加载中...</div>
  }

  return (
    <div> 
      <ResponsiveContainer width={'100%'} aspect={3} debounce={3}>
        <BarChart data={data} margin={{ top: 10, right: 30, left: 20, bottom: 5 }}>
          <CartesianGrid strokeDasharray="3 3"/>
          <XAxis dataKey="DEALER"/>
          <YAxis/>
          <Tooltip/>
          <Legend/>
          <Bar dataKey="Count" fill="#8884d8"/>
        </BarChart>
      </ResponsiveContainer>
    </div>
  )
}

export default Chart

内容的提问来源于stack exchange，提问作者James Cook