React钩子：从回调中访问最新状态
编辑（2020年6月22日）：由于这个问题重新引起了一些兴趣，我意识到可能会有一些困惑。所以我想强调：问题中的例子是一个玩具的例子。这并不能反映问题。引发这个问题的问题是使用第三方库（对其控制有限），该库将回调作为函数的参数。为回调提供最新状态的正确方法是什么？在REACT类中，这将通过使用this来完成。在React钩子中，由于状态封装在React.useState()的函数中的方式，如果回调通过React.useState()得到状态，则它将是STALE（设置回调时的值）。但是如果它__状态ABC4，它将通过传递的参数访问最新的状态。这意味着我们可以通过设置，使用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);
我在回调中设置状态时没有遇到问题，只是在访问最新状态时遇到了问题。
如果让我猜的话，我会认为任何状态的改变都会创建一个新的卡片函数实例。回调引用的是旧的。根据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效果。
如何从回调中访问最新的状态信息？
最佳答案