调用setHistory设置state触发过多重渲染，如何保留逻辑修复？

问题根因 #

你当前的passAcrossSelectedGame函数直接写在组件顶层，每次组件渲染都会无条件执行：

1. 当props.passedGamesFlag === 1条件命中时，调用setHistory会触发组件重渲染
2. 重渲染后又会再次执行passAcrossSelectedGame，如果条件仍然命中就会再次调用setHistory，形成无限重渲染循环
3. 代码中同时调用的props.setPassedGamesFlag(0)本身也会触发状态变更导致重渲染，进一步加剧循环问题

可行解决方案 #

方案1：用useEffect包裹逻辑，仅依赖指定变量触发执行（最推荐） #

把这段业务逻辑放到useEffect中，仅在props.passedGamesFlag变化时才执行，避免每次渲染都重复调用状态更新函数：

import { useEffect } from 'react';

// 组件内部代码
useEffect(() => {
  const passAcrossSelectedGame = () => {
    if (props.passedGamesFlag === 1) {
      props.setPassedGamesFlag(0);
      gameDetails = {
        blackKingSquare: '',
        whiteKingSquare: '',
      };

      plyViewed = 0;

      setHistory(game.history());

      const auxGame = new Game();

      gameHistory = [];
      gameHistory.push(auxGame.fen());
      game.history().forEach(move => {
        auxGame.move(move);
        fenHistory.push(auxGame.fen());
      });
    }
  };
  passAcrossSelectedGame();
}, [props.passedGamesFlag]);

该方案符合React的状态更新生命周期逻辑，不会出现重复触发更新的问题。

方案2：增加状态变更前置校验，避免无意义的setState #

如果你的业务场景确实需要在组件渲染时同步执行这段逻辑，可以在调用setHistory前先判断新值和旧值是否一致，只有值发生变化时才触发更新：

// 先拿到要更新的新history
const newHistory = game.history();
// 和当前history状态做对比，内容不一致才更新
// 简单场景可以用JSON.stringify，复杂结构推荐用深比较函数
if (JSON.stringify(newHistory) !== JSON.stringify(history)) {
  setHistory(newHistory);
}

额外优化建议 #

• 代码中的gameDetails、plyViewed、gameHistory、fenHistory如果是组件内的可变变量，不要直接定义在组件顶层，改用useRef存储，既不会每次渲染重置变量，也不会触发额外重渲染
• 如果game实例是组件内创建的，用useRef包裹保证实例唯一，避免每次渲染生成新的Game实例，导致game.history()每次返回新数组触发不必要的更新

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