Javascript 使用setInterval更改useState的值

我有一个带有

useState

的简单组件，它在每次单击中增加一个计数器-

function Counter() {
  let [counter, setCounter] = useState(0);

  const incCounter = () => {
    setCounter(counter + 1);
  };

  return (
    <div className="App">
      <h1>{counter}</h1>

      <button onClick={incCounter}>Inc</button>
    </div>
  );
}

但我没有看到组件中的计数器增加

我应该如何正确写入，并看到计数器按预期每1秒增加一次？

问题 在设置计时器回调的渲染周期中，状态值的封装已过时

解决方案 使用功能状态更新，使状态从以前的状态更新，而不是从更新排队的渲染周期中更新。这允许间隔回调和单击处理程序彼此独立地无缝更新状态

setCounter(counter => counter + 1);

事实上，只要下一个状态值依赖于任何以前的状态值，就应该使用函数状态更新。递增计数器是使用函数更新的经典示例

不要忘记返回一个cleanup函数来清除组件umnounts的时间间隔

完整代码

function Counter() {
  let [counter, setCounter] = useState(0);

  const incCounter = () => {
    setCounter((counter) => counter + 1);
  };

  useEffect(() => {
    const timerId = setInterval(() => {
      incCounter();
    }, 1000);

    return () => clearInterval(timerId);
  }, []);

  return (
    <div className="App">
      <h1>{counter}</h1>

      <button onClick={incCounter}>Inc</button>
    </div>
  );
}

函数计数器（）{
let[counter，setCounter]=useState（0）；
常量incCounter=（）=>{
设置计数器（（计数器）=>计数器+1）；
};
useffect（（）=>{
const timerId=setInterval（（）=>{
incCounter（）；
}, 1000);
return（）=>clearInterval（timerId）；
}, []);
返回(
{计数器}
股份有限公司
);
}

演示

---

回答得很好，我只想在

useffect

hook@nbokmans“与问题无关，但关于正确的生命周期维护，这一点非常重要和有效，”更新的答案。谢谢

function Counter() {
  let [counter, setCounter] = useState(0);

  const incCounter = () => {
    setCounter((counter) => counter + 1);
  };

  useEffect(() => {
    const timerId = setInterval(() => {
      incCounter();
    }, 1000);

    return () => clearInterval(timerId);
  }, []);

  return (
    <div className="App">
      <h1>{counter}</h1>

      <button onClick={incCounter}>Inc</button>
    </div>
  );
}