我開始學習 React，我想知道為什么我的 Counter 它不起作用 :( 我的目標是：當您按下按鈕時，Counter 函式開始“計數”并在 td 中呈現“計數”狀態。我不知道是什么我做錯了。
import React, { useState } from "react";
function Clock() {
const customStyle = {
fontSize: "100px"
};
const tdStyle = "px-3 border border-dark border-3 rounded bg-secondary";
//-------------------------------------------------------------------------
// THIS FUNCTION
const [count, setCount] = useState(0);
function Counter(){
setCount(count 1)
setInterval(Counter, 1000)
}
return (
<div className="rounded border border-dark border-3">
<table>
<tr style={customStyle}>
<td className={tdStyle}>
<i className="fa-solid fa-clock"></i>
</td>
<td className={tdStyle}>0</td>
<td className={tdStyle}>0</td>
<td className={tdStyle}>0</td>
<td className={tdStyle}>0</td>
<td className={tdStyle}>0</td>
<td className={tdStyle}>{count}</td> //here is showed
</tr>
</table>
<button onClick={Counter}>Pulsar</button> //button
</div>
);
}
export default Clock;
這適用于實際秒數
function Counter(){
setCount(new Date().getSeconds())
setInterval(Counter, 1000)
}
但這不是我想要的。我想要一個簡單的計數器。
另外，我如何在這段代碼中使用“onLoad”事件？當頁面加載時它開始計數并在頁面中呈現它？
先感謝您！！
uj5u.com熱心網友回復：
首先，您需要將 setInterval 放在 useEffect 掛鉤中，因為您當前每次狀態更新（即每秒）時都會創建一個新間隔，這將大大降低您的應用程式的速度。其次，您應該使用 useEffect 清理功能在每次組件重新渲染時洗掉間隔，以防止重復創建間隔。最后，鑒于您的狀態取決于先前的狀態快照（即先前的計數值），您應該使用回呼更新您的狀態（以確保您訪問最新的狀態快照）
useEffect(() => {
function counter(){
setCount(prevState => prevState 1)
}
let countInterval = setInterval(counter, 1000)
return () => clearInterval(countInterval)
}, [])
鑒于您每次計數更新時都呼叫 useEffect ，您可以（并且可能應該）使用setTimeout而不是setInterval. 在這種情況下，您不需要清理功能。
uj5u.com熱心網友回復：
如果我了解 useState 如何正常作業，我相信您在計數狀態方面遇到了一些異步問題，這可以解釋為什么您的“真實秒數”示例有效。
我建議將你的setInterval()函式移到一個useEffect鉤子上。useEffect鉤子也將是您問題的答案onLoad。
import React, { useState, useEffect } from "react";
function Clock() {
const customStyle = {
fontSize: "100px"
};
const tdStyle = "px-3 border border-dark border-3 rounded bg-secondary";
//-------------------------------------------------------------------------
// THIS FUNCTION
const [count, setCount] = useState(0);
useEffect(() => {
setInterval(counter, 1000);
}, []);
function Counter(){
setCount(count 1)
}
return (
<div className="rounded border border-dark border-3">
<table>
<tr style={customStyle}>
<td className={tdStyle}>
<i className="fa-solid fa-clock"></i>
</td>
<td className={tdStyle}>0</td>
<td className={tdStyle}>0</td>
<td className={tdStyle}>0</td>
<td className={tdStyle}>0</td>
<td className={tdStyle}>0</td>
<td className={tdStyle}>{count}</td> //here is showed
</tr>
</table>
<button onClick={Counter}>Pulsar</button> //button
</div>
);
}
export default Clock;
我不是 100% 肯定這會按預期作業，因為我目前無法對其進行測驗，但我相信這就是您正在尋找的。這里也是關于 useEffect 的檔案，https: //reactjs.org/docs/hooks-effect.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/476719.html
標籤：javascript 反应