import React, { useEffect, useState } from "react";
export default function App() {
const [counter, setcount] = useState(0);
useEffect(() => {
setInterval(() => {
setcount((pre) => pre + 1);
}, 1000);
}, []);
return (
<div className="App">
<div>{counter}</div>
</div>
);
}
useEffect第二个参数的数组置为空,否则会出现多个计时器,导致 x = 2 * x + 1
又去看了一下其他人的博客,这种问题和过时状态有关:
如果在计时器中包裹set方法,传参为变量本身+1,很可能多个计时器取到的变量值是最开始的,并不能保证是最新值
如果采用传入一个函数的方法,则react可以保证每次取到的值是最新的。