在if语句中响应不工作的SetState函数调用
在if语句中响应不工作的SetState函数调用
提问于 2021-04-05 17:55:53
这是我的(简化)代码：
import { useEffect, useState } from "react"
const Component = () => {
const [disabled, disableInput] = useState(false)
useEffect(() => {
console.log("Variable Got Changed")
}, [disabled])
const onSubmit = (e) => {
// disableInput(true) // Works
if (e.key === "Enter") {
disableInput(true) // Does not work
console.log("This if statement Works!")
...
disableInput(false) // Does not work
}
// disableInput(false) // Works
}
return(
<input [...] onKeyDown={onSubmit} disabled={disabled}/>
)
}我的问题是:每当我在disbaleInput()语句中调用if (e.key === "Enter")时，它都无法工作。如果我把它放在if-statement (仍然在onSubmit函数中)之前，它就能工作。
没有类似的命名变量或任何干扰的命名。
输出，disableInput()在if-语句的外部调用：
This if Statement Works
Variable got Changed // Logs later due to setState delay输出，disableInput()在if-语句的中调用：
This if Statement Works我完全不知道我做错了什么。
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-04-05 18:38:41
它正在工作的if语句没有问题，而且状态也在切换。但这里的问题是，在相同的语句中，您正在切换残疾人为true，然后为false。因此，在这种情况下，发生的情况是useEffect没有积极地“监视”更改。当您在组件中调用useEffect时，这实际上是在渲染完成后排队或调度可能运行的效果。
呈现完成后，useEffect将根据上次呈现中的值检查依赖项的列表，如果其中任何一个发生了更改，则调用效果函数。
但是在这里，在呈现发生之前，这个值会再次切换回false，这就是为什么useEffect在检查更改时找不到任何更改，这也是为什么它没有控制台日志。试着给一些时间来状态切换为false，或者为了测试目的注释掉它。
我已经使用了您的代码并更新了这里，请检查它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66957453
复制相关文章
相似问题
腾讯云开发者
