您可以在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();

现场演示

您可以在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();

现场演示

我真的很喜欢@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>);

}

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