如何解决React:在传递给类构造函数的回调函数中使用状态不使用最新版本的状态
抱歉,标题令人困惑,但实际情况如下:
在 MyComponent
中,我使用 count
React 钩子设置 useState
状态。
一旦组件安装(即 useEffect
没有依赖项),我将实例化两个 MyClass
对象,第一个参数作为增加状态的回调函数,第二个参数是 {{1} } 期间调用回调函数。
timeOut
的第一个实例在 1000 毫秒内调用回调并为 MyClass
设置新值,该值更新后将记录在第二个 count
中。
但是,当 useEffect
的第二个实例调用回调(在 MyClass
3000 毫秒后)并尝试递增 timeOut
值时,它使用 {{ 1}} 从 count
被实例化时(即 0)开始,因此它将 count
增加到 1(想要的行为是增加到 2,因为 MyClass
的第一个实例已经增加了count
从 0 到 1)
这不是与 MyClass
的异步行为相关的问题,因为很明显 count
的第一次更新发生在第二个实例尝试再次更新它之前(第二个 {{1} } 在 setState
状态更新时被调用,从控制台日志消息中您可以看到在 count
的第二个实例调用回调之前发生的情况。
JSFiddle 链接: https://jsfiddle.net/hfv24dpL/
总之,我认为问题在于回调函数中的 useEffect
状态是回调函数传递给 count
时 MyClass
状态的副本}} 构造函数。
此示例的解决方案可能是在更新 count
状态时(在第二个 count
中)仅实例化 MyClass
的第二个实例,但这不是我的解决方案正在寻找。
另一种解决方案是使用 MyClass
来增加 count
,但这在我的实际应用程序中是不可行的(useEffect
和 setCount(prevCount => prevCount + 1)
是我真正的 React 应用程序的骨架示例我只是为这个问题写的)。
我希望能够在组件安装时(在第一个 count
中)一起实例化这些类,并让回调引用 MyComponent
的最新版本。
是否有针对此 ^ 的解决方案,或者是否无法绕过此 javascript 和 React 实现?感谢您阅读所有这些,我知道它很长:)
MyClass
解决方法
当 funcToCallback
为 0 时,使用的 count
是组件初始安装中的那个。用 const
声明的变量不会改变,而 {{1 }} 回调只被调用一次,useEffect
关闭的 count
永远保持为 0。
最简单的解决方法是改用 setter 的函数版本,它会给你先前的状态作为参数 - 然后你可以增加它。改变
funcToCallback
到
function incCount(newCount){
console.log("NEW COUNT: ",newCount);
setCount(newCount);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。