编辑（2020 年 6 月 22 日）：由于这个问题引起了一些新的兴趣，我意识到可能存在一些混淆点。所以我想强调：问题中的例子是一个玩具例子。它不能反映问题。引发这个问题的问题是使用第三方库（对其进行有限控制），该库将回调作为函数的参数。为该回调提供最新状态的正确方法是什么。在 React 类中，这将通过使用this. 在 React hooks 中，由于 state 被封装在 的函数中的方式React.useState()，如果回调通过获取状态React.useState()，它将是陈旧的（设置回调时的值）。但如果它设置状态，它将可以通过传递的参数访问最新状态。这意味着我们可以通过将状态设置为与以前相同来使用 React 钩子在此类回调中获得最新状态。这有效，但违反直觉。
-- 原始问题在下面继续-
我正在使用 React 钩子并尝试从回调中读取状态。每次回调访问它时，它都会返回到它的默认值。
使用以下代码。Count is: 0无论我单击多少次，控制台都会继续打印。
function Card(title) {
const [count, setCount] = React.useState(0)
const [callbackSetup, setCallbackSetup] = React.useState(false)
function setupConsoleCallback(callback) {
console.log("Setting up callback")
setInterval(callback, 3000)
}
function clickHandler() {
setCount(count+1);
if (!callbackSetup) {
setupConsoleCallback(() => {console.log(`Count is: ${count}`)})
setCallbackSetup(true)
}
}
return (<div>
Active count {count} <br/>
<button onClick={clickHandler}>Increment</button>
</div>);
}
const el = document.querySelector("#root");
ReactDOM.render(<Card title='Example Component' />, el);
你可以在这里找到这个代码
我在回调中设置状态没有问题，只是在访问最新状态时。
如果让我猜一猜，我会认为任何状态更改都会创建 Card 函数的新实例。并且回调指的是旧的。根据https://reactjs.org/docs/hooks-reference.html#functional-updates上的文档，我想到了在回调中调用 setState 的方法，并将函数传递给 setState，看看是否我可以从 setState 中访问当前状态。更换
setupConsoleCallback(() => {console.log(`Count is: ${count}`)})
和
setupConsoleCallback(() => {setCount(prevCount => {console.log(`Count is: ${prevCount}`); return prevCount})})
你可以在这里找到这个代码
这种方法也没有奏效。编辑：实际上第二种方法确实有效。我的回调中有一个错字。这是正确的做法。我需要调用 setState 来访问之前的状态。即使我无意设置状态。
我觉得我已经对 React 类采取了类似的方法，但是。为了代码的一致性，我需要坚持使用 React Effects。
如何从回调中访问最新的状态信息？