在React useEffect中调用setStage导致白屏问题求助

我正在用React开发俄罗斯方块，遇到了一个问题：在useStage自定义Hook的useEffect中调用setStage时，页面会白屏，注释掉这行代码后页面恢复正常。

相关代码如下：

export const useStage = (player, resetPlayer) => {
  const [stage, setStage] = useState(createStage());

  useEffect(() => {
    const updateStage = (prevStage) => {
      ...
      return newStage;
    };
     setStage((prev) => updateStage(prev));
  }, [player.collided, player.pos.x, player.pos.y, player.tetromino]);

return [stage, setStage];
};

我是跟着视频教程进行开发的。

可能的原因及解决办法 #

1. updateStage内部逻辑阻塞或出错 #

• 检查updateStage里的代码：如果生成newStage时有死循环（比如数组遍历边界写错），或者做了大量重复计算，会卡死主线程，导致页面白屏。
• 排查方式：在updateStage里加console.log或者断点，看生成的newStage结构是否合理，有没有循环跑不完的情况。

2. player依赖项频繁触发重渲染 #

• 如果player.pos.x/pos.y/tetromino这些属性被高频更新（比如动画帧里不必要的重复赋值），会让useEffect反复执行，setStage被连续调用，引发重渲染风暴。
• 解决：
  • 检查player的更新逻辑，确保只有真正需要的时候才修改这些属性。
  • 用useMemo缓存player的关键属性，或者给useEffect加防抖，减少不必要的触发。

3. createStage初始化有问题 #

• 如果createStage返回的初始舞台数据格式错误，或者初始化时就有性能问题，结合后续setStage的更新，会导致渲染组件无法解析数据，进而白屏。
• 排查：直接打印createStage()的返回值，确认是符合预期的二维数组，同时检查初始化逻辑有没有冗余计算。

4. 使用stage的子组件渲染出错 #

• 有时候并不是setStage的问题，而是依赖stage的子组件在渲染时出错（比如数组越界），导致整个页面崩溃。
• 排查：打开浏览器控制台看报错信息，定位到使用stage的组件，检查渲染逻辑是否正确处理了舞台数据。

内容的提问来源于stack exchange，提问作者yanis-falaki