在某种程度上类似的问题，但当使用状态值时，状态值是一个对象，并且不更新。

我有一些问题，所以我希望这可以帮助到一些人。 我们需要传递与新对象合并的旧对象

const [data, setData] = useState({key1: "val", key2: "val"});
useEffect(() => {
  setData(...data, {key2: "new val", newKey: "another new"}); // --> Pass old object
}, []);

对于那些寻找极简解决方案的人:

停止间隔N秒后，和 能够重置它多次再次按下按钮。

(我不是React专家，我的同事要求我帮忙，我写了这篇文章，我想其他人可能会觉得它有用。)

  const [disabled, setDisabled] = useState(true)
  const [inter, setInter] = useState(null)
  const [seconds, setSeconds] = useState(0)

  const startCounting = () => {
    setSeconds(0)
    setDisabled(true)
    setInter(window.setInterval(() => {
        setSeconds(seconds => seconds + 1)
    }, 1000))
  }

  useEffect(() => {
      startCounting()
  }, [])

  useEffect(() => {
    if (seconds >= 3) {
        setDisabled(false)
        clearInterval(inter)
    }
  }, [seconds])

  return (<button style = {{fontSize:'64px'}}
      onClick={startCounting}
      disabled = {disabled}>{seconds}</button>)
}

const [seconds, setSeconds] = useState(0);
  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds((seconds) => {
        if (seconds === 5) {
          setSeconds(0);
          return clearInterval(interval);
        }
        return (seconds += 1);
      });
    }, 1000);
  }, []);

注意:这将有助于使用useState钩子更新和重置计数器。5秒后秒停止。因为首先改变setSecond值，然后在setInterval内用更新的秒停止计时器。as useEffect运行一次。

原因是传递给setInterval闭包的回调只访问第一次呈现中的时间变量，它不能访问后续呈现中的新时间值，因为第二次没有调用useEffect()。

在setInterval回调函数中，time的值总是0。

与您熟悉的setState一样，状态钩子有两种形式:一种是它接收更新状态的形式，另一种是传递当前状态的回调形式。您应该使用第二种形式，并在setState回调中读取最新的状态值，以确保在增加状态值之前拥有最新的状态值。

好处:可选择的方法 Dan Abramov在他的博客文章中深入讨论了关于使用setInterval和钩子的话题，并提供了解决这个问题的替代方法。强烈推荐阅读!

function Clock() { const [time, setTime] = React.useState(0); React.useEffect(() => { const timer = window.setInterval(() => { setTime(prevTime => prevTime + 1); // <-- Change this line! }, 1000); return () => { window.clearInterval(timer); }; }, []); return ( <div>Seconds: {time}</div> ); } ReactDOM.render(<Clock />, document.querySelector('#app')); <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script> <div id="app"></div>

按照下面的操作，它可以正常工作。

const [count , setCount] = useState(0);

async function increment(count,value) {
    await setCount(count => count + 1);
  }

//call increment function
increment(count);

useRef可以解决这个问题，这里有一个类似的组件，每1000毫秒增加计数器

import { useState, useEffect, useRef } from "react";

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

  useEffect(() => {
    counterRef.current = count;
  })

  useEffect(() => {
    setInterval(() => {
      setCount(counterRef.current + 1);
    }, 1000);
  }, []);

  return (
    <div className="App">
      <h1>The current count is:</h1>
      <h2>{count}</h2>
    </div>
  );
}

我认为这篇文章将帮助您使用interval react钩子