reactjs - 单击按钮后 useState 计数器闪烁

Question

export const App2 =()=>{
     const [counter,setCounter]=useState(0)
     setTimeout(()=>setCounter(counter+1),1000)

  
     return(
         <div> {counter}
             <button onClick={()=>{setCounter(counter+1)}}> Plus</button>
         </div>

     )



 }

我录了个视频上传到youtube .我不知道为什么会发生这种不稳定并且切换选项卡使其再次正常。有谁赐教吗？我只是对 this 稍作修改代码

Answer 1

setTimeout 会产生效果，因此我们应该将其放在 useEffect() Hook 中。此外，由于 setCounter 依赖于先前的计数器状态，我们可以将更新函数传递给 setCounter 以接收先前的状态值。

import React, { useCallback, useEffect } from "react";

export const App2 = () => {
  const [counter, setCounter] = useState(0);

  const increment = useCallback(() => {
    setCounter((counter) => counter + 1);
  }, []);

  useEffect(() => {
    const id = setTimeout(increment, 1000);
    return () => clearTimeout(id);
  }, [increment]);

  return (
    <div>
      {" "}
      {counter}
      <button onClick={increment}> Plus</button>
    </div>
  );
};