React调用随机色生成函数触发Too many re-renders错误如何解决

• 首先是generateRandomColor函数逻辑错误：你在for循环的第一次迭代就直接return了随机颜色值，循环后的setRandomColor(randColor)属于死代码，永远不会执行，所以state永远不会被更新。
• 其次是无限重渲染的核心诱因：如果你后续调整了return的位置，把setState放到return之前，你直接在组件的顶层作用域调用generateRandomColor(COLORS)，会触发以下死循环：
  1. 组件渲染 -> 调用generateRandomColor -> 执行setRandomColor更新state
  2. state更新触发组件重新渲染
  3. 重新渲染又会再次调用generateRandomColor，回到第一步循环
     这就是React抛出Too many re-renders错误的直接原因。

你只需要在组件首次挂载时生成一次随机颜色即可，不需要每次渲染都重新计算，提供两种常用实现方式：

方案1：直接设置state初始值（最简洁） #

把随机颜色生成逻辑作为useState的初始值传入，初始值只会在组件第一次挂载时计算一次，不会触发额外重渲染：

const COLORS = [
  "#FFAEBC",
  "#1ec891",
  "#ff725e",
  "#ffd05b",
  "#A0E7E5",
  "#5885AF",
];

// 单独封装随机色生成工具函数，逻辑清晰可复用
const getRandomColor = (colors) => {
  const randColorIndex = Math.floor(Math.random() * colors.length);
  return colors[randColorIndex];
};

const DisplaySubject = (props) => {
  // 传入函数返回初始值，仅首次挂载执行一次
  const [randomColor, setRandomColor] = useState(() => getRandomColor(COLORS));

  console.log("random color state :", randomColor);
  return (
    <div>
      Let's get started
    </div>
  );
};

export default DisplaySubject;

方案2：useEffect挂载时触发（适合需要后续手动更新的场景） #

如果后续需要支持手动切换随机色，可以用空依赖的useEffect在挂载时执行一次生成逻辑，也可以绑定到点击等事件上触发：

const DisplaySubject = (props) => {
  const [randomColor, setRandomColor] = useState("");

  // 仅组件挂载时生成一次随机色
  useEffect(() => {
    setRandomColor(getRandomColor(COLORS));
  }, []);

  // 支持点击按钮切换随机色
  return (
    <div>
      Let's get started
      <button onClick={() => setRandomColor(getRandomColor(COLORS))}>切换颜色</button>
    </div>
  );
};

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