我也有类似的问题，但在我的情况下，我使用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获取最新值; 或者设计另一个钩子。

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

我知道的唯一方法是调用setState(current_value =>…)函数，并在我们的逻辑中使用current_value。一定要把它还回去。例:

const myPollingFunction = () => {
    setInterval(() => {
        setState(latest_value => {
            // do something with latest_value
            return latest_value;    
        }
    }, 1000);
};

对于您的场景(您不能一直创建新的回调并将它们传递给第三方库)，您可以使用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>);

}

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

您可以在setState回调中访问最新的状态。但意图并不清楚，我们永远不想在这种情况下使用setState，它可能会让其他人在阅读你的代码时感到困惑。因此，您可能希望将它包装在另一个钩子中，以便更好地表达您想要的内容

function useExtendedState<T>(initialState: T) {
  const [state, setState] = React.useState<T>(initialState);
  const getLatestState = () => {
    return new Promise<T>((resolve, reject) => {
      setState((s) => {
        resolve(s);
        return s;
      });
    });
  };

  return [state, setState, getLatestState] as const;
}

使用

const [counter, setCounter, getCounter] = useExtendedState(0);

...

getCounter().then((counter) => /* ... */)

// you can also use await in async callback
const counter = await getCounter();

现场演示

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.
})