我正在嘗試撰寫一個函式來從陣列 COLORS 中獲取隨機顏色。但是，問題不是只回傳一種顏色，而是回傳太多顏色，導致無限錯誤。導致其中 react 拋出 Too many re-renders 錯誤。我的代碼有什么問題？
const COLORS = [
"#FFAEBC",
"#1ec891",
"#ff725e",
"#ffd05b",
"#A0E7E5",
"#5885AF",
];
const DisplaySubject = (props) => {
const [randomColor, setRandomColor] = useState("");
const generateRandomColor = (colors) => {
let randColorIndex, randColor;
for (let i = 0; i < colors.length; i ) {
randColorIndex = Math.floor(Math.random() * colors.length);
randColor = colors[randColorIndex];
return randColor;
}
console.log(randColor);
setRandomColor(randColor);
};
generateRandomColor(COLORS);
console.log("random color state :", randomColor);
return (
<div>
Let's get started
</div>
);
};
export default DisplaySubject;
uj5u.com熱心網友回復：
首先，修復您的顏色生成器功能：
const generateRandomColor = (colors) => {
const randColorIndex = Math.floor(Math.random() * colors.length);
return colors[randColorIndex];
};
然后您可以將其用作 的初始值useState：
const DisplaySubject = (props) => {
const [randomColor, setRandomColor] = useState(generateRandomColor(COLORS));
return (
<div style={{ backgroundColor: randomColor }}>
Let's get started
</div>
);
};
問題是setRandomColor在getRandomColor函式內部呼叫，導致無限渲染周期。
uj5u.com熱心網友回復：
您不需要遍歷陣列來獲取隨機元素。像這樣改變你的功能：
const generateRandomColor = (colors) => {
let randColorIndex, randColor;
randColorIndex = Math.floor(Math.random() * colors.length);
randColor = colors[randColorIndex];
console.log(randColor);
setRandomColor(randColor);
return randColor;
};
每次組件重新渲染時都會呼叫該函式。因此，在類似事件上呼叫該函式，onClick或者如果您只想在組件第一次呈現時運行該函式一次，請使用useEffect：
useEffect(() => generateRandomColor(COLORS), [])
uj5u.com熱心網友回復：
每次安裝組件時，generateRandomColor() 都會呼叫該函式，然后更新導致新渲染的狀態。
作為一種選擇，您可以創建一個按鈕并使用onClick事件呼叫此函式：
<button onClick={generateRandomColor(COLORS)}>generate a color</button>
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/343831.html
標籤：javascript 反应
下一篇：如何使模態視窗在小型設備上滾動