我的反应简单计数器无法按预期工作

Question

我开始学习React，我想知道为什么我的计数器不工作:(我的目标是:当你按下按钮，计数器功能开始"计数";render "count"州在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"代码中的事件?当页面加载时，它开始计数并在页面中呈现它?

提前感谢!!

Answer 1

首先，你需要把setInterval放在一个useEffect钩子中，因为你现在每次状态更新(即每秒)都会创建一个新的interval，这将大大降低你的应用程序的速度。其次，你应该使用useEffect清理函数在每次组件重新渲染时删除间隔，以防止重复的间隔创建。最后，如果你的状态依赖于之前的状态快照(即之前的计数值)，你应该使用回调来更新你的状态(以确保你访问最近的状态快照)

useEffect(() => {
function counter(){
setCount(prevState => prevState + 1)
}
let countInterval = setInterval(counter, 1000)
return () => clearInterval(countInterval)
}, [])

考虑到每次计数更新时调用useEffect，您可以(并且可能应该)使用setTimeout而不是setInterval。在这种情况下，您不需要清理函数。

Answer 2

如果我理解useState是如何正确工作的，我相信你在计数状态中遇到了一些异步问题，这就解释了为什么你的" real seconds ";作品例子。

我建议将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