reactjs - 如何在React中正确使用setinterval

Question

为什么在react中每次使用setinterval计数都会增加2，React版本是18

 const [count, setCount] = useState(0)
  useEffect(() => {
    setInterval(() => {
      setCount(count => count + 1)
    }, 1000)
  }, [])

  return (
    <div>{count}</div>
  )

Answer 1

您想要清理间隔。

您可能会看到它被触发两次，因为 React 在 Debug模式下挂载您的组件两次以向您显示此类错误。

 const [count, setCount] = useState(0)
  useEffect(() => {
    const interval = setInterval(() => {
      setCount(count => count + 1)
    }, 1000)
    return () => clearInterval(interval)

  }, [])

  return (
    <div>{count}</div>
  )