我想創建一個陣列，其中填充了 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>
);
}
謝謝
uj5u.com熱心網友回復：
如果您setstate(myArrayMakingFunction)在useEffect鉤子內使用，這應該可以作業。
https://reactjs.org/docs/hooks-effect.html
uj5u.com熱心網友回復：
在 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>
);
}
uj5u.com熱心網友回復：
首先，您需要匯入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>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/351795.html
標籤：javascript 反应 循环
下一篇：縮放時不觸發onZoom