React中使用for循环为useState赋值触发渲染错误如何解决

错误1：Hook拼写错误 #

React内置的状态Hook是驼峰命名useState，你的代码里导入和声明时都写为小写的usestate，属于语法错误，会直接导致运行报错。

错误2：组件顶层直接调用setState导致无限渲染 #

你在组件函数的顶层直接执行setstate(arr)，每次组件渲染都会触发setState，而setState本身又会触发组件重新渲染，形成死循环，最终抛出渲染错误。

方案1：直接将随机数组作为初始值（最简洁，适合只需要初始化一次的场景） #

直接在useState初始化的时候生成数组，不需要额外调用setState：

import React from "react";
import "./style.css";
// 修正拼写为useState
import { useState } from "react"
export default function App() {
  // 初始化时直接生成随机数组作为初始值
  const [state, setState] = useState(() => {
    let arr = [];
    for(let i = 0 ; i < 64 ; i++){
      arr[i] = Math.floor(Math.random()*8);
    }
    return arr;
  });
  
  return (
    <div>
      <h1>State</h1>
      <p>{state.join(', ')}</p>
    </div>
  );
}

补充说明：代码里新增的join(', ')是为了把数组转成逗号分隔的字符串更友好展示，你可以根据需求调整展示格式。

方案2：用useEffect包裹setState，仅在组件挂载时执行一次 #

如果后续有需要重新生成随机数组的需求，可以用useEffect限制只在挂载时执行一次赋值：

import React, { useState, useEffect } from "react";
import "./style.css";

export default function App() {
  const [state, setState] = useState([]);

  useEffect(() => {
    let arr = [] ;
    for(let i = 0 ; i < 64 ; i++){
      arr[i] = Math.floor(Math.random()*8);
    }
    setState(arr);
  }, []); // 空依赖数组表示仅组件挂载时执行一次
  
  return (
    <div>
      <h1>State</h1>
      <p>{state.join(', ')}</p>
    </div>
  );
}

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