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

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

不要尝试在回调中访问最近的状态，而是使用useEffect。使用setState返回的函数设置状态不会立即更新您的值。状态更新是批处理和更新的

如果您将useEffect()看作是setState的第二个参数(来自基于类的组件)，这可能会有所帮助。

如果你想用最近的状态做一个操作，使用useEffect()，当状态改变时，它会被击中:

const { useState, useEffect } = React; function App() { const [count, setCount] = useState(0); const decrement = () => setCount(count-1); const increment = () => setCount(count+1); useEffect(() => { console.log("useEffect", count); }, [count]); console.log("render", count); return ( <div className="App"> <p>{count}</p> <button onClick={decrement}>-</button> <button onClick={increment}>+</button> </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render( < App / > , rootElement); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script> <div id="root"></div>

更新

你可以为setInterval创建一个钩子，并像这样调用它:

const { useState, useEffect, useRef } = React; function useInterval(callback, delay) { const savedCallback = useRef(); // Remember the latest callback. useEffect(() => { savedCallback.current = callback; }, [callback]); // Set up the interval. useEffect(() => { function tick() { savedCallback.current(); } if (delay !== null) { let id = setInterval(tick, delay); return () => clearInterval(id); } }, [delay]); } function Card(title) { const [count, setCount] = useState(0); const callbackFunction = () => { console.log(count); }; useInterval(callbackFunction, 3000); useEffect(()=>{ console.log('Count has been updated!'); }, [count]); return (<div> Active count {count} <br/> <button onClick={()=>setCount(count+1)}>Increment</button> </div>); } const el = document.querySelector("#root"); ReactDOM.render(<Card title='Example Component'/>, el); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script> <div id="root"></div>

关于useEffect()的更多信息

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

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

我真的很喜欢@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获取最新值; 或者设计另一个钩子。

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

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

}

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

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

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

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

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