如何将Google Sheets返回的JSON数据传入React组件使用

核心逻辑是在组件挂载阶段拉取Sheets数据，把接口返回的二维数组转换成Table组件要求的对象结构，通过React状态管理驱动视图更新，不需要手动修改原有teams变量。

第一步：修正接口返回值取值逻辑 #

Google Sheets V4接口返回的JSON结构中，实际单元格二维数组存储在values字段下，不是根节点，先调整请求函数直接返回可用的二维数组：

const getSheetValues = async () => {
    const request = await fetch(`https://sheets.googleapis.com/v4/spreadsheets/${SHEET_ID}/values/A1:C7`,
    {
        headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${ACCESS_TOKEN}`
        }
    });
    const res = await request.json();
    // 加空数组兜底，避免接口异常时解构报错
    return res.values || [];
}

第二步：改造组件，通过状态管理表格数据 #

用useState存储表格渲染数据，useEffect在组件首次加载时触发请求，拿到数据后做格式转换直接传给Table的data prop，同时补全基础的加载、错误兜底：

import { useState, useEffect } from 'react';

// 原有写死的队伍数据作为加载失败/请求中的兜底默认值
const fallbackTeams = [
    {
        team: 'Cannons',
        wins: 4,
        loss: 2
    },
    {
        team: 'Rhythm',
        wins: 1,
        loss: 5
    }
]

const Standings = () => {
    const [tableData, setTableData] = useState(fallbackTeams);
    const [loading, setLoading] = useState(false);
    const [errMsg, setErrMsg] = useState('');

    useEffect(() => {
        const loadStats = async () => {
            setLoading(true);
            setErrMsg('');
            try {
                const rawStats = await getSheetValues();
                // 注意：如果你的Sheets第一行A1:C1是表头（比如"队名""胜场""负场"），把rawStats替换为rawStats.slice(1)跳过表头行
                const formattedData = rawStats.map(row => ({
                    team: row[0],
                    wins: Number(row[1]), // 接口返回值是字符串，转数字避免排序、统计逻辑异常
                    loss: Number(row[2])
                }));
                setTableData(formattedData);
            } catch (e) {
                setErrMsg('战绩数据加载失败，请稍后重试');
                console.error('拉取Sheets数据失败:', e);
            } finally {
                setLoading(false);
            }
        };
        loadStats();
    }, []);

    if (loading) return <div className='cont'>战绩加载中...</div>;
    if (errMsg) return <div className='cont'>{errMsg}</div>;

    return (
        <div className='cont'>
            <div className='standings'>
                <Table columns={columns} data={tableData} className='tbl' />
            </div>
        </div>
    )
}

注意事项 #

• 若Sheets选取范围A1:C7的第一行是表头，转换数据时务必跳过第一条，否则表头会被识别为队伍数据渲染
• 胜场、负场必须转成数字类型，Sheets返回的单元格文本默认是字符串格式，直接传入会导致数值类逻辑出错
• 兜底数据、加载态、错误态可以根据自己的业务样式调整，避免请求过程中页面空白

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