useState 函数没有立即更新[重复]答案

【问题标题】：useState function is not updating immediately [duplicate]useState 函数没有立即更新[重复]
【发布时间】：2020-10-09 15:40:57
【问题描述】：

我正在使用react-admin 框架。我正在使用useState 方法来设置复选框是否被选中：

const [checked, setChecked] = useState(false);

根据checked 的值，我修改了其他一些常量。但是我遇到了checked 值没有立即更新的问题。这一切都发生在这个方法中：

const handleCheckbox = () =>
    {
        setChecked(!checked);

        if (checked === true) 
        {
            input.onChange('');
        }
        else 
        {
            input.onChange(defaultVal);
        }
    }

是否有类似setState 中的某种callBack 函数？还是我应该使用完全不同的东西？

提前谢谢你。

【问题讨论】：

stackoverflow.com/questions/54954091/…，这对你有帮助
没有useEffectstackoverflow.com/a/70405577/5823517也有办法做到这一点

标签： javascript reactjs

【解决方案1】：

如果您想使用 useState 钩子在状态更改时调用回调函数，您可以使用附加到状态更改的 useEffect 钩子。应该看起来像这样。

    useEffect(() => {
        if (checked === true) 
        {
            input.onChange('');
        }
        else 
        {
            input.onChange(defaultVal);
        }
    }, [!checked])

【讨论】：

这解决了问题，谢谢。

【解决方案2】：

您必须注意，功能组件中的状态更新是异步的，并且还会受到闭包的影响，因此您不会在同一个渲染周期中看到更新的值

有关更多详细信息，请查看此帖子： useState set method not reflecting change immediately

另外，state 带有 useState 的更新程序不提供回调，这与类组件中的 this.setState 不同。

你可以利用 useEffect 来实现同样的行为

const handleCheckbox = () =>
    {
        setChecked(!checked);
    }

const initialRender = useRef(true);

useEffect(() => {
   if(!initialRender.current) {
   if (checked === true) 
        {
            input.onChange('');
        }
        else 
        {
            input.onChange(defaultVal);
        }
    }
    else {
       initialRender.current = false;
    }
}, [checked])

【讨论】：