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

【问题标题】：React usestate with for loop error in rendering在渲染中用 for 循环错误反应 usestate
【发布时间】：2021-12-20 17:21:35
【问题描述】：

我想创建一个数组，其中填充了 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>
  );
}

谢谢

【问题讨论】：

标签： javascript reactjs loops

【解决方案1】：

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

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

【讨论】：

【解决方案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>
  );
}

【讨论】：

【解决方案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>
  );
}

【讨论】：