使用react-google-charts时，Table图表从API填充数据后仍为空

你的代码里有几个关键问题导致图表无法显示数据，逐个解决：

1. 未用React状态追踪数据变化 #

你用let data定义的是普通变量，就算后续往里面push了数据，React感知不到变化，不会重新渲染组件，图表自然拿不到更新后的新数据。必须用useState来管理数据状态。

2. 异步请求调用时机错误 #

在组件的return里直接调用addData是错误写法，应该用useEffect钩子在组件挂载时触发数据请求。

3. API请求方法与字段不匹配 #

• 获取用户列表应该用GET方法而非POST，不需要传空请求体，这不符合REST规范，也可能导致后端返回异常。
• API返回的用户ID字段是_id，但你代码里写的是user.id，这会导致ID列数据为空。

修复后的完整代码 #

import React, { useState, useEffect } from "react";
import { Chart } from "react-google-charts";

export const options = {
    title: "Users List",
    width: "100%",
};

export function Users() {
    // 用useState管理表格数据状态
    const [data, setData] = useState([["email", "password", "id"]]);

    useEffect(() => {
        const fetchUsers = async () => {
            try {
                // 改用GET请求获取用户列表
                const response = await fetch('http://localhost:8000/users', {
                    method: 'GET',
                    headers: { 'Content-Type': 'application/json' },
                });
                const users = await response.json();
                
                // 处理数据，注意使用正确的_id字段
                const newRows = users.map(user => [
                    user.email,
                    user.password,
                    user._id
                ]);
                
                // 更新状态，触发组件重渲染
                setData(prev => [...prev, ...newRows]);
            } catch (error) {
                console.error('获取用户数据失败:', error);
            }
        };

        fetchUsers();
    }, []); // 空依赖数组，确保只在组件挂载时执行一次

    return (
        <div className="center">
            <Chart
                chartType="Table"
                width="100%"
                height="400px"
                data={data}
                options={options}
            />
        </div>
    );
}

export default Users

额外说明 #

• 用async/await比链式then更易读，同时加上错误捕获，避免请求失败时没有提示。
• 更新状态时用prev => [...prev, ...newRows]，确保创建新数组而非修改原数组，符合React状态不可变的原则。
• 如果你后端确实要求用POST获取数据（不推荐），可以把method改回POST，但要确保后端能正确处理空请求体，同时必须修正user._id的字段问题。

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