Recharts图表不渲染？解决数据异步加载时机错误导致的初始空白问题

recharts图表在页面首次加载时为空，仅在代码保存触发热更新后才显示——根本原因是`usestate`状态更新的异步特性被误用：在`setyearlydata`后立即读取`yearlydata[index]`，此时旧状态尚未更新，导致`monthlydata`设为`undefined`。

这个问题非常典型，本质是 React 状态更新的批处理与异步语义被忽视。你当前的 getActivity 函数中：

const getActivity = async (index) => {
  const res = await api.get("/activity");
  const data = res?.data;
  setYearlyData(data);           // ✅ 触发状态更新，但不会立即改变 yearlyData 变量
  setMonthlyData(yearlyData[index]); // ❌ 错误！此时 yearlyData 仍是旧值（如 [] 或 undefined）
};

由于 yearlyData 是由 useState 声明的不可变引用，setYearlyData(data) 仅将新值标记为“下次渲染时使用”，而当前作用域中的 yearlyData 仍为初始化值（例如 []），因此 yearlyData[index] 返回 undefined，最终 LineChart 的 data={monthlyData} 接收了 undefined —— Recharts 无法渲染空数据，图表即为空白。

✅ 正确做法：基于最新获取的数据设置状态

直接使用刚 fetch 到的 data，而非依赖尚未更新的 yearlyData：

const getActivity = async (index: number) => {
  try {
    const res = await api.get("/activity");
    const data = res.data; // 假设 data 是数组，如 [{ name: 'Jan', user: 120, guest: 80 }, ...]
    setYearlyData(data);
    setMonthlyData(data[index] ?? []); // 安全访问，避免 index 越界
  } catch (err) {
    console.error("Failed to fetch activity data:", err);
    setMonthlyData([]); // 降级为空数组
  }
};

? 提示：若 /activity 返回的是一个包含多个时间维度（如年、月）的对象，例如 { yearly: [...], monthly: [...] }，请确保你实际需要的是 data.monthly 而非 data[index]。

? 调试建议（快速定位状态问题）

在开发阶段，添加日志可清晰观察执行时序：

const [yearlyData, setYearlyData] = useState([]);
const [monthlyData, setMonthlyData] = useState([]);

useEffect(() => {
  const fetchData = async () => {
    console.log('【1】Fetching activity...');
    const res = await api.get("/activity");
    console.log('【2】Received data:', res.data);

    setYearlyData(res.data);
    console.log('【3】After setYearlyData — yearlyData is STILL:', yearlyData); // ? 仍是旧值！

    // ✅ 正确：用 res.data 计算
    setMonthlyData(res.data[0] || []);
  };
  fetchData();
}, []);

你会看到 【3】 日志中 yearlyData 并未变化——这正是 React 的设计：状态更新是“声明式”的，不是“命令式赋值”。

酷表ChatExcel

北大团队开发的通过聊天来操作Excel表格的AI工具

下载

?️ 进阶优化：使用 useEffect 响应 yearlyData 变化（推荐）

更符合 React 数据流的最佳实践是分离关注点：先获取原始数据，再通过 useEffect 派生派生状态：

const [yearlyData, setYearlyData] = useState([]);
const [monthlyData, setMonthlyData] = useState([]);
const [activeIndex, setActiveIndex] = useState(0);

// 获取数据
useEffect(() => {
  const fetchActivity = async () => {
    try {
      const res = await api.get("/activity");
      setYearlyData(res.data);
    } catch (err) {
      console.error(err);
      setYearlyData([]);
    }
  };
  fetchActivity();
}, []);

// 派生 monthlyData（自动响应 yearlyData 更新）
useEffect(() => {
  if (yearlyData.length > 0 && activeIndex < yearlyData.length) {
    setMonthlyData(yearlyData[activeIndex]);
  } else {
    setMonthlyData([]);
  }
}, [yearlyData, activeIndex]);

这样逻辑清晰、可测试性强，且完全规避了“状态竞态”。

⚠️ 注意事项总结

• ❌ 不要在 setState 后同步读取该 state 变量（它不会变）；
• ✅ 所有依赖新状态的逻辑，应放在 useEffect(dep) 中，或直接使用刚获取的 data；
• ✅ 初始化 state 时建议用 null 或明确类型（如 useState([])），避免隐式 undefined 导致静默失败；
• ✅ Recharts 要求 data 是非空数组，传入 undefined / null / [] 均不渲染任何图形（无报错，易被忽略）；
• ✅ 若使用 Vite + SWC，确保无 HMR 相关插件干扰状态（本例中 Ctrl+S 生效只是巧合：热更新强制重渲染，掩盖了逻辑缺陷）。

修复后，图表将在页面加载完成、数据就绪后立即正确渲染，无需任何手动保存操作。