React SetState Function 调用在 if 语句中不起作用

Question

这是我的（简化的）代码：

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}/>
    )
}

我的问题：每当我在if (e.key === "Enter")语句中调用disbaleInput()时，它都不起作用。 如果我把它放在if-statement之前（仍然在onSubmit函数内），它确实有效。

没有类似命名的变量或任何干扰命名。

Output，在 if 语句之外调用disableInput() ：

This if Statement Works
Variable got Changed // Logs later due to setState delay

Output，在if 语句中调用disableInput() ：

This if Statement Works

我完全不知道我做错了什么。

Answer 1

if 语句没有问题，它正在工作，并且 state 也正在切换。 但是这里的问题是你在同一个语句中将 disabled 切换为 true 然后 false 。 因此，在这种情况下，useEffect 不会主动“监视”更改。 当您在组件中调用 useEffect 时，这实际上是在渲染完成后排队或安排可能运行的效果。

渲染完成后，useEffect 将根据上次渲染的值检查依赖值列表，如果其中任何一个发生更改，将调用您的效果 function。

但是在这里，在渲染可能发生之前，该值再次切换回 false，这就是为什么 useEffect 在检查更改时找不到任何内容，这就是为什么它没有控制台日志的原因。 尝试为 state 设置一点超时，将其切换为 false 或将其注释掉以进行测试。

我已使用您的代码并在此处更新，请查看。