Prime React Chart通过Axios加载API数据失败求助

问题根源 #

1. 图表数据未响应状态更新：avgChart使用useState初始化，仅在组件首次渲染时执行一次，后续avgSoc通过API更新后，图表数据不会同步刷新。
2. 数据格式错误：data: [Object.values(avgSoc)]会生成嵌套数组（如[[74.85]]），不符合PrimeReact Chart要求的一维数组格式。
3. 数据与标签长度不匹配：图表定义了4个标签，但API仅返回1个数据，长度不一致会导致渲染异常。

修复方案 #

const Rem = () => {
    // 初始化带默认值，避免首次渲染数据为空
    const [avgSoc, SetAvgSoc] = useState({ avg_soc_fleet: 0 });

    useEffect(() => {
        axios.get('http://127.0.0.1:8000/other/avgsoc_fleet')
            .then(response => {
                SetAvgSoc(response.data);
            })
            .catch(err => console.error('API请求失败:', err)); // 增加错误排查逻辑
    }, []);

    // 改为计算属性，依赖avgSoc自动更新图表数据
    const avgChart = {
        labels: ['Soc', 'Pressure', 'Isolation', 'BattVolt24'],
        datasets: [
            {
                data: [
                    avgSoc.avg_soc_fleet, 
                    0, // Pressure默认值，可根据业务需求调整
                    0, // Isolation默认值，可根据业务需求调整
                    0  // BattVolt24默认值，可根据业务需求调整
                ],
                fill: false,
                borderColor: '#4bc0c0',
                tension: .4
            }
        ]
    };

    const options = {
        legend: {
            display: true,
        }
    };

    return (
        <div className="grid">
            <div className="col-8">
                <div className="card">
                    <Chart type="line" data={avgChart} options={options} />
                </div>
            </div>
        </div>
    );
};

export default Rem;

额外说明 #

• 若后续其他标签的数据也需要从API获取，可扩展useEffect中的请求逻辑，或调整后端返回的数据结构匹配标签数量。
• 新增的错误处理能快速定位API请求失败的原因，便于调试。

内容的提问来源于stack exchange，提问作者Hugo Urbina