ReactJS：解决Fetch数据后Table组件无法自动更新问题

核心问题 #

你用普通的let data存储数据，React不会监听这类变量的变化，所以即便数据更新，组件也不会重新渲染。必须用React的状态管理（useState Hook）来存数据，同时要用useEffect控制异步请求的执行时机，避免重复调用。

优化后的代码 #

import { useState, useEffect } from 'react';

export default function AdminQueue() {
    const columns = [
        { path: "id",   name: "ID" },
        { path: "status", name: "Status" },
        { path: "date",  name: "Date" },
        { path: "submitter",   name: "Submitter" },
        { path: "action", name: "Action" },
        { path: "code",  name: "Code" },
    ];
    
    // 用useState定义状态，初始值为空数组
    const [data, setData] = useState([]);
    // 可选：添加加载状态，提升用户体验
    const [isLoading, setIsLoading] = useState(true);

    async function loadQueue() {
        try {
            const response = await fetch('http://localhost:8088/api/adminqueue/', {
                method: 'GET',
                credentials: 'include',
                mode: 'cors'
            });

            // response.json()已完成解析，无需再用JSON.parse
            const queue = await response.json();
            
            // 用map替代for循环，直接转换数据格式
            const formattedData = queue.map(item => ({
                id: item.JobID,
                status: item.Status,
                date: item.Time,
                submitter: item.Submitter,
                action: item.Action,
                code: item.Type
            }));
            
            // 更新状态触发组件重渲染
            setData(formattedData);
        } catch (error) {
            console.error('加载数据失败:', error);
        } finally {
            setIsLoading(false);
        }
    }

    // 用useEffect确保只在组件挂载时请求一次数据
    useEffect(() => {
        loadQueue();
    }, []);

    // 加载中显示提示，避免Table空渲染
    if (isLoading) {
        return <div>加载中...</div>;
    }

    return (
        <div>
            <Table id="id" columns={columns} data={data} title="Admin Queue" />
        </div>
    );
}

关键修改说明 #

• 状态管理：useState定义的data会被React监听，调用setData时会触发组件重新渲染，Table就能拿到最新数据
• 请求时机控制：useEffect的空依赖数组[]保证请求只在组件第一次挂载时执行，不会重复发起请求
• 代码简化：用map替代for循环让数据转换更简洁；去掉多余的JSON.parse，因为response.json()已经返回了解析后的对象
• 体验优化：增加加载状态和错误捕获，避免请求失败或等待时无反馈

另外，async/await是处理异步请求的标准写法，不能移除，否则无法正确等待Fetch请求的结果，保留它是正确的选择。

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