React setState引发多次重渲染：随机图标选择逻辑异常求助

问题根源 #

你直接在组件顶层定义randomIcon，组件每次渲染（比如父组件更新、自身状态变化）都会重新执行Math.floor(Math.random() * icons.length)，导致随机数多次生成。后续的useEffect依赖设置错误，进一步触发了不必要的重复执行。

解决方案 #

将随机数生成逻辑放到useState的初始化函数中，该函数仅在组件首次挂载时执行一次，后续重渲染不会再运行，彻底避免重复生成随机数：

import { useState } from 'react';

// 直接生成最终需要的computerIcon，无需单独维护randomIcon状态
const [computerIcon] = useState(() => {
  const randomIdx = Math.floor(Math.random() * icons.length);
  return icons[randomIdx].icon;
});

如果需要单独保留randomIcon状态（比如后续有其他逻辑用到），也可以这样写：

const [randomIcon] = useState(() => Math.floor(Math.random() * icons.length));
const [computerIcon] = useState(() => icons[randomIcon].icon);

为什么之前的方法无效 #

1. 组件顶层定义随机数：组件每次渲染都会重新计算randomIcon，console.log会多次输出，即使你把setState放到useEffect，也无法阻止组件渲染时随机数的重复生成。
2. useEffect添加randomIcon依赖：每次组件渲染都会生成新的randomIcon，导致useEffect被频繁触发，进入“生成随机数→触发useEffect→更新状态→组件重渲染→再次生成随机数”的循环。

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