recharts 图表在页面首次加载时不显示，仅在手动保存文件（触发热重载）后才出现，根本原因是 `usestate` 状态更新异步特性被误用：在 `setyearlydata` 后立即访问旧值 `yearlydata[index]`，导致 `monthlydata` 被设为 `undefined`，图表因空数据无法渲染。
这个问题本质是 React 状态更新的时序陷阱：useState 的 setter 函数（如 setYearlyData）是异步的，它不会立即改变当前作用域中的变量值，而是调度一次重新渲染，并在下一次组件执行时才提供更新后的状态值。
在你的代码中：
const getActivity = async (index) => {
const res = await api.get("/activity");
const data = res?.data;
setYearlyData(data);
setMonthlyData(yearlyData[index]); // ❌ 错误！此时 yearlyData 仍是初始值（如 [] 或 undefined）
};由于 yearlyData 在 setYearlyData(data) 调用后并未立刻更新，yearlyData[index] 实际取到的是初始空数组或 undefined，最终 monthlyData 被设为 undefined。而 <LineChart data={monthlyData} /> 接收 undefined 或空数组时会静默失败（不报错但不渲染线条），造成“图表消失”的假象。当你按 Ctrl+S 触发热重载时，组件重新挂载并执行 useEffect，此时若 yearlyData 已缓存（如 Vite HMR 保留了部分状态），可能偶然“生效”，进一步掩盖问题。
✅ 正确做法：直接使用刚获取的 data 构建 monthlyData，而非依赖尚未更新的 yearlyData
const getActivity = async (index) => {
try {
const res = await api.get("/activity");
const data = res?.data || [];
setYearlyData(data);
// ✅ 正确：用本次 fetch 到的 data 计算 monthlyData
if (Array.isArray(data) && data.length > index) {
setMonthlyData(data[index]);
} else {
setMonthlyData([]); // 降级处理
}
} catch (error) {
console.error("Failed to fetch activity data:", error);
setMonthlyData([]);
}
};? 进阶建议：
-
初始化状态更明确：将 yearlyData 初始值设为 null 而非 []，可让 yearlyData[index] 报 TypeError，便于早期发现错误：
const [yearlyData, setYearlyData] = useState(null); // 而非 useState([])
-
避免重复计算：若 monthlyData 仅由 yearlyData 和 index 派生，推荐使用 useMemo 派生状态，减少冗余 setState：
const [yearlyData, setYearlyData] = useState(null); const [activeIndex, setActiveIndex] = useState(0); useEffect(() => { const fetchActivity = async () => { const res = await api.get("/activity"); setYearlyData(res?.data || []); }; fetchActivity(); }, []); // 派生 monthlyData，自动响应 yearlyData 和 activeIndex 变化 const monthlyData = useMemo(() => { return yearlyData?.[activeIndex] ?? []; }, [yearlyData, activeIndex]);
⚠️ 注意事项：
- 不要在 useEffect 中同时设置多个强依赖的状态（如先 setYearlyData 再 setMonthlyData 依赖它），这容易引发竞态和时序 bug；优先使用派生状态或直接数据流。
- Recharts 对 data 属性要求严格：必须是非空数组且每个对象需包含 XAxis.dataKey（如 "name"）和 Line.dataKey（如 "user"）对应的字段，否则静默忽略。可在渲染前添加校验：
{(!monthlyData || monthlyData.length === 0) && ( <div className="text-gray-500 text-sm">暂无数据</div> )}
通过修正状态更新逻辑，图表将在首次加载时正确渲染，彻底告别“Ctrl+S 才显示”的调试困境。
