React Recharts全屏图表退出后显示空白问题求助

问题根源 #

页面空白的直接原因是状态值不匹配：

• 父组件DataContainer中，whichGraphIsFullscreen初始值为"none"，图表显示条件依赖该值判断
• 子组件RechartGraphContainer退出全屏时将状态设为null，导致父组件中所有图表的显示条件(whichGraphIsFullscreen == "none")不成立，所有图表被隐藏

你观察到的console.log状态未即时更新是React状态更新的异步特性导致的，属于正常现象，不是空白问题的根源。

修复步骤 #

1. 统一退出全屏时的状态值

修改RechartGraphContainer中的onFullscreenClick函数，退出全屏时将状态设为"none"（与父组件初始值保持一致）：

const onFullscreenClick = () => {
  console.log(`Fullscreen button clicked in ${title} graph`);
  if (whichGraphIsFullscreen === title) {
    console.log(`Exiting fullscreen mode in ${title} graph`);
    setWhichGraphIsFullscreen("none"); // 替换原有的null
  } else {
    console.log(`Entering fullscreen mode in ${title} graph`);
    setWhichGraphIsFullscreen(title);
  }
}

2. （可选）优化父组件条件判断可读性

提取辅助函数减少重复代码，让判断逻辑更清晰：

// 在DataContainer组件内部添加
const shouldRenderGraph = (graphName) => {
  const visibilityKey = graphName.toLowerCase();
  return graphVisibility[visibilityKey] && 
         (whichGraphIsFullscreen === graphName || whichGraphIsFullscreen === "none");
};

然后在JSX中使用：

<div className={styles.container}>
  {shouldRenderGraph("Temperature") && (
    <RechartGraphContainer 
      title="Temperature" 
      data={timeSeries[0]} 
      dataLabels={["Time", "BOARD", "CO2_SENSOR"]} 
      whichGraphIsFullscreen={whichGraphIsFullscreen} 
      setWhichGraphIsFullscreen={setWhichGraphIsFullscreen} 
    />
  )}
  {shouldRenderGraph("Humidity") && (
    <RechartGraphContainer 
      title="Humidity" 
      data={timeSeries[1]} 
      dataLabels={["Time", "BOARD", "CO2_SENSOR"]} 
      whichGraphIsFullscreen={whichGraphIsFullscreen} 
      setWhichGraphIsFullscreen={setWhichGraphIsFullscreen} 
    />
  )}
  {/* 其余4个图表同理 */}
</div>

3. 正确查看状态更新结果

由于React状态更新是异步的，调用setWhichGraphIsFullscreen后立即console.log无法获取最新值。若需追踪状态变化，可在组件中添加useEffect监听：

// 在DataContainer或RechartGraphContainer中添加
useEffect(() => {
  console.log(`当前全屏图表：${whichGraphIsFullscreen}`);
}, [whichGraphIsFullscreen]);

验证效果 #

修复后，点击全屏按钮进入单图表全屏模式，再次点击按钮时会将状态重置为"none"，父组件会重新渲染所有可见的图表，页面不再空白。

内容的提问来源于stack exchange，提问作者Pelle Martin Hesketh