javascript - React 在 setInterval 中使用 useEffect 丢失状态

Question

我在 useEffect 中使用 setInterval 来触发函数以秒为间隔执行。但是，当回调被执行时，state 的值就是默认 state 的值，为什么？

import React, { useState, useEffect, useCallback } from "react";
import "./styles.css";

export default function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const i = setInterval(testando, 1000);
    return () => clearInterval(i);
  }, []);

  const testando = () => {
    console.log(count); --> here value is 0
    setCount((prev) => prev + 1);
  };

  return (
    <div className="App">
      <h1> {count} </h1> --> here value is right
      <button onClick={() => setCount((prev) => prev + 200)}> Teste </button>
    </div>
  );
}

标签： javascriptreactjs

Answer 1

  useEffect(() => {
    const i = setInterval(testando, 1000);
    return () => clearInterval(i);
  }, [count]);