React中useEffect+useState+fetch存API数据后状态丢失问题

先排查API请求的基础问题 #

先确认你的fetch逻辑有没有正确拿到数据并更新状态：

• 给fetch加try/catch，排查是否API请求失败（比如跨域、接口返回错误），如果请求失败，状态会一直是空数组。
• 在setCommandesListe(data)之前打印data，确认接口确实返回了正确的数据。
• 检查useState的初始化：const [commandesListe, setCommandesListe] = useState([])，别写成useState()（这样初始是undefined，可能导致后续问题）。

正确的基础fetch代码示例：

import { useState, useEffect } from 'react';

function YourComponent() {
  const [commandesListe, setCommandesListe] = useState([]);

  useEffect(() => {
    const fetchCommandes = async () => {
      try {
        const response = await fetch('你的API地址');
        if (!response.ok) throw new Error(`请求错误: ${response.status}`);
        const data = await response.json();
        setCommandesListe(data);
        console.log('接口返回数据:', data); // 确认这里有数据
      } catch (error) {
        console.error('获取数据失败:', error);
      }
    };
    fetchCommandes();
  }, []); // 空依赖只在组件挂载时请求一次
  // ...其他代码
}

解决模态框拿不到数据的闭包问题 #

表格能显示说明状态已经更新，但点击按钮时拿不到数据，90%是闭包捕获了旧状态：

• 不要在点击事件里直接依赖组件的commandesListe状态，而是直接从MRT的行数据里拿当前行的内容。
• 在MRT的列配置中，按钮的点击事件直接使用row.original（当前行的原始数据），这样完全绕开组件状态的闭包问题。

示例代码：

const columns = [
  // 你的其他列配置
  {
    accessorKey: 'actions',
    header: '操作',
    cell: ({ row }) => (
      <Button
        variant="contained"
        onClick={() => {
          // 直接用row.original就是当前行的最新数据
          setSelectedRow(row.original);
          setModalOpen(true);
        }}
      >
        查看详情
      </Button>
    ),
  },
];

为什么Vite保存后能正常？ #

热更新（HMR）会重新渲染组件，此时闭包会捕获更新后的状态，但这是开发环境的临时现象，生产环境依然会出现问题，不能依赖这个。

别加commandesListe到useEffect依赖 #

加这个依赖会导致：每次状态更新就重新触发fetch，而fetch返回新数组又会更新状态，形成无限循环，而且如果接口请求慢，状态会一直处于未更新的空数组状态。

额外排查：组件是否被重复挂载 #

检查你的组件是不是被包裹在条件渲染里（比如{isShow && <YourTable />}），如果条件变化导致组件卸载再挂载，状态会被重置为空数组。如果是这种情况，把状态提升到父组件，或者用useRef保存状态。

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