从Flask后端取数结构不符，React柱状图渲染失败

使用Flask作为后端API、React/Next.js作为前端构建简易柱状图时，遇到数据映射问题：

• 硬编码数组格式的JSON数据时，图表可正常渲染；
• 通过API获取数据时图表报错，排查发现硬编码数据是Array类型，而API返回的是Object类型；
• 尝试将对象转为数组后，会丢失键名仅保留值，无法匹配图表所需的结构。

API返回数据 #

{
  "grc_external": 32,
  "name": "Storage",
  "open": 293,
  "sequence": 175
}

前端代码 #

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

function storage() {
    
    /* 硬编码数据可正常渲染
    const [storageData, setStorageData] = useState([
        { name: 'Storage', sequence: 100, grc_external: 100, open: 300 },
    ]);
    */

    /* 接口获取数据无法渲染 */
    const [storageData, setStorageData] = useState([]);
    const fetchStorageData = () => {
        fetch("http://localhost:8080/api/storage")
        .then(response => {
            return response.json()
        })
        .then(data => {
            setStorageData(data)
        })
    }
    useEffect(() => {
        fetchStorageData()
    }, []);
    
    console.log(storageData)
    const storageData2 = Object.entries(storageData)
    console.log(storageData2)

    const BarChart = dynamic(() => (
        import("recharts").then(recharts => recharts.BarChart)
    ), { ssr: false });

    return (
    <ResponsiveContainer className="data_storage_chart" width="80%" height={200} >
        <BarChart data={storageData2} layout="vertical" barCategoryGap={1}>
            <CartesianGrid />
            <XAxis type="number" domain={[0, 500]} ticks={[0, 50, 100, 150, 200, 250, 300, 350, 400, 450, 500]} />
            <YAxis type="category" dataKey="name" tick={false} />
            <Tooltip />
            <Legend />
            <Bar dataKey="sequence" stackId="a" fill="#ab0000" />
            <Bar dataKey="grc_external" stackId="a" fill="#5aaafa" />
            <Bar dataKey="open" stackId="a" fill="#b0b0b0" />
        </BarChart>
    </ResponsiveContainer>
    );
}
  
export default storage;

Flask端点代码 #

@app.route("/api/storage", methods=['GET'])
def storage():
    data = jsonify({
        'name': 'Storage', 
        'sequence': 175, 
        'grc_external': 32, 
        'open': 293
    })
    return data

控制台日志 #

• 硬编码数据日志：显示为包含单个对象的数组
• API获取数据日志：显示为单个对象

核心问题 #

Recharts的BarChart组件要求data属性接收包含数据对象的数组，你的硬编码数据是[{...}]格式（数组包裹单个对象），但API返回的是单个对象{...}，直接赋值会导致数据结构不匹配。

修改步骤 #

1. 调整前端数据处理逻辑：获取API数据后，将单个对象包装成数组，保持和硬编码数据一致的结构：

.then(data => {
    setStorageData([data]) // 把单个对象放入数组
})

2. 移除无效的数组转换：删除const storageData2 = Object.entries(storageData)这行代码，直接使用storageData作为BarChart的data属性：

<BarChart data={storageData} layout="vertical" barCategoryGap={1}>

3. 优化重复导入：顶部已经导入了recharts的部分组件，动态导入的BarChart可以统一为动态导入版本，避免命名冲突：

// 移除顶部的BarChart导入，保留动态导入
const BarChart = dynamic(() => import("recharts").then(recharts => recharts.BarChart), { ssr: false });

修改后的完整前端代码片段 #

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

const BarChart = dynamic(() => import("recharts").then(recharts => recharts.BarChart), { ssr: false });

function storage() {
    const [storageData, setStorageData] = useState([]);
    
    const fetchStorageData = () => {
        fetch("http://localhost:8080/api/storage")
        .then(response => response.json())
        .then(data => setStorageData([data])) // 关键修改：包装为数组
    }

    useEffect(() => {
        fetchStorageData()
    }, []);

    // 添加加载状态提示
    if (storageData.length === 0) {
        return <div>加载中...</div>;
    }

    return (
    <ResponsiveContainer className="data_storage_chart" width="80%" height={200} >
        <BarChart data={storageData} layout="vertical" barCategoryGap={1}>
            <CartesianGrid />
            <XAxis type="number" domain={[0, 500]} ticks={[0, 50, 100, 150, 200, 250, 300, 350, 400, 450, 500]} />
            <YAxis type="category" dataKey="name" tick={false} />
            <Tooltip />
            <Legend />
            <Bar dataKey="sequence" stackId="a" fill="#ab0000" />
            <Bar dataKey="grc_external" stackId="a" fill="#5aaafa" />
            <Bar dataKey="open" stackId="a" fill="#b0b0b0" />
        </BarChart>
    </ResponsiveContainer>
    );
}
  
export default storage;

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