为什么我的计数没有按预期增加?

Question

在下面的代码中，当我单击两次increase时，计数增加2。然而，在5秒后，它减少1，然后增加2，而不是像预期的那样简单地增加1。代码如下:-

const Counter=()=>{
const [count, setCount]=useState(0)
setTimeout(()=>{
setCount(count+1)
}, 5000)
return(<>
<button onClick={()=>setCount(()=>count+1)}>Increase</button>
<h2>{count}</h2>
</>
)
}

Answer 1

这就是setState的函数模式派上用场的地方。如果state的新值依赖于前一个值，则建议使用此模式进行精确计算。

像

那样改变你的增加函数:

setCount((count) => count + 1);

这是一个链接

注意:您直接在主函数体内设置状态，因此这可能会导致大量渲染。组件每次呈现时都会设置一个新的超时，并且每个超时都会导致状态更新，从而导致呈现。你可以改变你的方法