React生成随机数数组时useState重复更新重渲染问题求助

问题根源 #

1. 你在组件函数顶层直接调用add()，每次组件渲染（包括更新后的重渲染）都会执行这个函数，调用setArr又会触发组件重渲染，形成无限循环。
2. var isLoaded = false是普通变量，组件每次渲染都会重新初始化这个变量为false，所以你的控制逻辑完全起不到作用。
3. 代码里还有个语法错误：Math.random是方法，需要加括号调用，应该是Math.random()。

修复方案 #

方案1：使用useEffect仅在组件挂载时生成一次数组

把生成数组的逻辑放到useEffect里，依赖数组传空数组，这样只会在组件首次挂载时执行一次：

import './App.css';
import { useEffect, useState } from 'react';

function App() {
  const [arr, setArr] = useState([]);

  // 仅在组件挂载时执行一次
  useEffect(() => {
    const generateRandomArray = () => {
      let array = [];
      for(let i = 0; i <= 20; i++){
        // 修正Math.random的调用方式
        array.push(Math.floor(Math.random() * (10 - 6)) + 6);
      }
      setArr(array);
      console.log('yes');
    };
    generateRandomArray();
  }, []); // 空依赖数组确保只执行一次

  return (
    <div>
    </div>
  );
}

export default App;

方案2：直接在useState初始化时生成数组

如果不需要等待挂载后执行，直接在useState初始化时生成数组，更简洁：

import './App.css';
import { useState } from 'react';

// 抽出生成数组的工具函数
const generateRandomArray = () => {
  let array = [];
  for(let i = 0; i <= 20; i++){
    array.push(Math.floor(Math.random() * (10 - 6)) + 6);
  }
  return array;
};

function App() {
  // 初始化时直接生成数组，仅执行一次
  const [arr, setArr] = useState(generateRandomArray());

  return (
    <div>
    </div>
  );
}

export default App;

额外说明 #

• 尽量避免在组件顶层直接调用会触发状态更新的函数，否则必然引发重复渲染。
• 控制渲染逻辑优先使用React提供的钩子（比如useEffect、useMemo），不要用普通变量，因为普通变量在组件每次渲染时都会重新初始化。

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