在渲染中用 for 循环错误反应 usestate

Question

我想创建一个数组，其中填充了 0 到 7 之间的随机值，并使用这个数组作为状态值，但是当 console.log 状态值时，在功能组件调用 for 循环的 for 循环中多次使用它。 这将在反应中产生渲染错误

import React from "react";
import "./style.css";
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));

  }
  setstate(arr);
  
  return (
    <div>
      <h1>State</h1>
      <p>{state}</p>
    </div>
  );
}

谢谢

Answer 1

如果您在useEffect钩子中使用setstate(myArrayMakingFunction) ，这应该可以工作。

https://reactjs.org/docs/hooks-effect.html

Answer 2

在 componentDidMount 阶段执行此操作。

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>
      {state?.map(i=><p key={i}>{i}</p>)}
    </div>
  );
}

Answer 3

首先，您需要导入useState，而不是usestate。 您还需要导入 useEffect 否则会导致多次重新渲染。 您的解决方案是以下代码：

import React, {useState, useEffect} from "react";
import "./style.css";
export default function App() {
  const [ state , setstate ] = useState([]);
  let arr = [] ;
  for(let i = 0 ; i < 64 ; i++){
    arr[i] = Math.floor((Math.random ()*8));

  }

  useEffect(()=>{
    setstate(arr);
  }, [])
  
  
  return (
    <div>
      <h1>State</h1>
      <p>{state}</p>
    </div>
  );
}