React for循环执行两次、数组仅偶下标赋值及渲染次数超限报错问题

问题原因 #

• 随机数组奇数位为空：你在for循环的循环体内部额外写了一次i++，配合for循环头部自带的i++，每次循环i会累计加2，仅会给偶数索引的位置赋值，奇数索引全程跳过未赋值，所以最终数组只有偶数位有值。
• 无限重渲染报错：你直接在组件函数的顶层作用域调用setcandyArray更新状态，而React组件每次状态更新都会重新执行整个组件函数，执行时又会再次调用setcandyArray触发新的状态更新，形成死循环，触发React的重渲染次数限制机制报错。

修复方案 #

1. 删除for循环体中多余的i++语句
2. 将数组生成和状态更新的逻辑放到useEffect钩子中，传入空依赖数组，确保逻辑只会在组件首次挂载时执行一次，不会触发死循环
3. 若需要在Board组件中使用candyArray，记得通过props传递

修复后的App.js代码 #

import logo from './logo.svg';
import './App.css';
import Board from "./components/Board";
import { useState, useEffect } from 'react';

function App() {
  const [candyArray, setcandyArray] = useState([]);

  useEffect(() => {
    let n = 8, arr = [], i;
    for (i = 0; i < (n * n); i++) {
      arr[i] = Math.floor((Math.random() * n));
    }
    setcandyArray(arr);
  }, [])

  console.log(candyArray);
  return (
    <Board candyArray={candyArray} />
  );
}

export default App;

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