我也有类似的问题，但在我的情况下，我使用redux与钩子，也没有在同一个组件中改变状态。我有方法在回调使用的状态值分数和它(回调)有旧的分数。 我的解决方法很简单。它不像以前的那样优雅，但在我的情况下，它做到了，所以我把它放在这里，希望它能帮助到别人。

const score = useSelector((state) => state.score);
const scoreRef = useRef(score);

useEffect(() => {
    scoreRef.current = score ;
}, [score])

一般思想是将最新状态存储在ref:)

我真的很喜欢@davnicwil的回答，希望有了useState的源代码，他的意思可能会更清楚。

  // once when the component is mounted
  constructor(initialValue) {
    this.args = Object.freeze([initialValue, this.updater]);
  }

  // every time the Component is invoked
  update() {
    return this.args
  }

  // every time the setState is invoked
  updater(value) {
    this.args = Object.freeze([value, this.updater]);
    this.el.update()
  }

在用法中，如果initialValue以数字或字符串开头，例如1。

  const Component = () => {
    const [state, setState] = useState(initialValue)
  }

预排

第一次运行useState，这个。Args = [1，] 你第二次运行useState，这个。Args没有变化 如果setState被2调用，这个。Args = [2，] 下次你运行useState时，这个。Args没有变化

现在，如果你做一些事情，特别是对值的延迟使用。

  function doSomething(v) {
    // I need to wait for 10 seconds
    // within this period of time
    // UI has refreshed multiple times
    // I'm in step 4)
    console.log(v)
  }

  // Invoke this function in step 1)
  doSomething(value)

您将得到一个“旧”值，因为您首先将当前副本(当时)传递给它。虽然这。Args每次都会获得最新的副本，这并不意味着旧的副本会被更改。您传递的值不是基于引用的。这可以成为一个特色!!

总结

为了改变它，

使用该值而不传递它; 使用对象作为值; 使用useRef获取最新值; 或者设计另一个钩子。

虽然上述方法都可以修复它(在其他答案中)，但问题的根本原因是您将旧值传递给函数，并期望它与未来值一起运行。我认为这是它一开始出错的地方，如果你只看解就不太清楚。

我遇到了一个类似的错误，试图做完全相同的事情，你在你的例子-使用setInterval回调引用React组件的道具或状态。

希望我可以从一个稍微不同的方向来解决这个问题，从而为这里已经给出的好的答案补充补充——认识到这甚至不是一个React问题，而是一个普通的Javascript问题。

我认为这里最吸引人的是从React钩子模型的角度来思考的，其中的状态变量，毕竟只是一个局部变量，可以被视为React组件上下文中的有状态变量。你可以确信，在运行时，变量的值将始终是React为特定状态块所持有的任何东西。

然而，一旦你跳出React组件上下文——例如在setInterval函数中使用该变量，抽象就会中断，你就会回到那个状态变量实际上只是一个保存值的局部变量的事实。

The abstraction allows you to write code as if the value at runtime will always reflect what's in state. In the context of React, this is the case, because what happens is whenever you set the state the entire function runs again and the value of the variable is set by React to whatever the updated state value is. Inside the callback, however, no such thing happens - that variable doesn't magically update to reflect the underlying React state value at call time. It just is what it is when the callback was defined (in this case 0), and never changes.

这就是我们得到解决方案的地方:如果局部变量指向的值实际上是一个可变对象的引用，那么事情就会改变。该值(即引用)在堆栈上保持不变，但它在堆上引用的可变值可以更改。

这就是为什么接受的答案中的技术是有效的-一个React ref恰好提供了这样一个对可变对象的引用。但我认为有必要强调的是，“React”这部分只是一个巧合。解决方案，就像问题本身一样，与React本身无关，它只是React ref碰巧是获得一个可变对象引用的一种方式。

你也可以使用，例如，一个简单的Javascript类，将它的引用保持在React状态。需要明确的是，我并不是说这是一个更好的解决方案，甚至是可取的(它可能不是!)，而是用它来说明这个解决方案没有“React”方面——它只是Javascript:

class Count {
  constructor (val) { this.val = val }
  get () { return this.val }
  
  update (val) {
    this.val += val
    return this
  }
}

function Card(title) {
  const [count, setCount] = React.useState(new Count(0))
  const [callbackSetup, setCallbackSetup] = React.useState(false)
  
  function setupConsoleCallback(callback) {
    console.log("Setting up callback")
    setInterval(callback, 3000)
  }

  function clickHandler() {
    setCount(count.update(1));
    if (!callbackSetup) {
      setupConsoleCallback(() => {console.log(`Count is: ${count.get()}`)})
      setCallbackSetup(true)
    }
  }
  
  
  return (
    <div>
      Active count {count.get()} <br/>
      <button onClick={clickHandler}>Increment</button>
    </div>
  )
}

const el = document.querySelector("#root");
ReactDOM.render(<Card title='Example Component' />, el);

你可以看到，通过简单地让状态指向一个引用，这不会改变，并改变引用所指向的底层值，你在setInterval闭包和React组件中都得到了你想要的行为。

同样，这不是惯用的React，但只是说明了引用是这里的终极问题。希望对大家有帮助!

2021年6月更新:

使用NPM模块react-usestateref总是获得最新的状态值。它完全向后兼容React useState API。

示例代码如何使用它:

import useState from 'react-usestateref';

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

console.log(couterRef.current); // it will always have the latest state value
setCount(20);
console.log(counterRef.current);

NPM包react-useStateRef允许你通过使用useState访问最新的状态(如ref)。

2020年12月更新:

为了解决这个问题，我创建了一个react模块。React - useStateRef (React useStateRef)。使用的例子:

var [state, setState, ref] = useState(0);

它的工作方式完全像useState，但除此之外，它给你在ref.current下的当前状态

了解更多:

https://www.npmjs.com/package/react-usestateref

原来的答案

您可以使用setState来获取最新的值

例如:

var [state, setState] = useState(defaultValue);

useEffect(() => {
   var updatedState;
   setState(currentState => { // Do not change the state by getting the updated state
      updateState = currentState;
      return currentState;
   })
   alert(updateState); // the current state.
})

对于您的场景(您不能一直创建新的回调并将它们传递给第三方库)，您可以使用useRef来保持具有当前状态的可变对象。像这样:

function Card(title) {
  const [count, setCount] = React.useState(0)
  const [callbackSetup, setCallbackSetup] = React.useState(false)
  const stateRef = useRef();

  // make stateRef always have the current count
  // your "fixed" callbacks can refer to this object whenever
  // they need the current value.  Note: the callbacks will not
  // be reactive - they will not re-run the instant state changes,
  // but they *will* see the current value whenever they do run
  stateRef.current = count;

  function setupConsoleCallback(callback) {
    console.log("Setting up callback")
    setInterval(callback, 3000)
  }

  function clickHandler() {
    setCount(count+1);
    if (!callbackSetup) {
      setupConsoleCallback(() => {console.log(`Count is: ${stateRef.current}`)})
      setCallbackSetup(true)
    }
  }


  return (<div>
      Active count {count} <br/>
      <button onClick={clickHandler}>Increment</button>
    </div>);

}

你的回调可以引用可变对象来“读取”当前状态。它将在它的闭包中捕获可变对象，并且可变对象的每次渲染都将使用当前状态值更新。

我将使用setInterval()和useEffect()的组合。

setInterval() on its own is problematic, as it might pop after the component has been unmounted. In your toy example this is not a problem, but in the real world it's likely that your callback will want to mutate your component's state, and then it would be a problem. useEffect() on its own isn't enough to cause something to happen in some period of time. useRef() is really for those rare occasions where you need to break React's functional model because you have to work with some functionality that doesn't fit (e.g. focusing an input or something), and I would avoid it for situations like this.

您的示例没有做任何非常有用的事情，而且我不确定您是否关心计时器弹出有多规律。因此，使用这种技巧大致达到你想要的效果的最简单方法如下:

import React from 'react';

const INTERVAL_FOR_TIMER_MS = 3000;

export function Card({ title }) {
  const [count, setCount] = React.useState(0)

  React.useEffect(
    () => {
      const intervalId = setInterval(
        () => console.log(`Count is ${count}`),
        INTERVAL_FOR_TIMER_MS,
      );
      return () => clearInterval(intervalId);
    },
    // you only want to restart the interval when count changes
    [count],
  );

  function clickHandler() {
    // I would also get in the habit of setting this way, which is safe
    // if the increment is called multiple times in the same callback
    setCount(num => num + 1);
  }

  return (
    <div>
      Active count {count} <br/>
      <button onClick={clickHandler}>Increment</button>
    </div>
  );
}

需要注意的是，如果计时器弹出，那么您将在一秒钟后单击，那么下一个日志将在前一个日志后4秒出现，因为单击时计时器将重置。

如果您想解决这个问题，那么最好的方法可能是使用Date.now()来查找当前时间，并使用新的useState()来存储您想要的下一次弹出时间，并使用setTimeout()而不是setInterval()。

这有点复杂，因为你必须存储下一个计时器弹出，但不是太糟糕。这种复杂性也可以通过简单地使用一个新函数来抽象出来。总结一下，这里有一个使用钩子启动周期计时器的安全“反应”方法。

import React from 'react';

const INTERVAL_FOR_TIMER_MS = 3000;

const useInterval = (func, period, deps) => {
  const [nextPopTime, setNextPopTime] = React.useState(
    Date.now() + period,
  );
  React.useEffect(() => {
    const timerId = setTimeout(
      () => {
        func();
        
        // setting nextPopTime will cause us to run the 
        // useEffect again and reschedule the timeout
        setNextPopTime(popTime => popTime + period);
      },
      Math.max(nextPopTime - Date.now(), 0),
    );
    return () => clearTimeout(timerId);
  }, [nextPopTime, ...deps]);
};

export function Card({ title }) {
  const [count, setCount] = React.useState(0);

  useInterval(
    () => console.log(`Count is ${count}`),
    INTERVAL_FOR_TIMER_MS,
    [count],
  );

  return (
    <div>
      Active count {count} <br/>
      <button onClick={() => setCount(num => num + 1)}>
        Increment
      </button>
    </div>
  );
}

只要您在deps数组中传递interval函数的所有依赖项(与useEffect()完全一样)，您就可以在interval函数中做任何您喜欢的事情(设置状态等)，并且确信没有任何东西会过时。