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

Posted 2023-02-22

【中文标题】useState 函数没有立即更新[重复]

【英文标题】：useState function is not updating immediately [duplicate]

【发布时间】：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 函数？还是我应该使用完全不同的东西？

提前谢谢你。

【问题讨论】：

***.com/questions/54954091/…，这对你有帮助

没有useEffect***.com/a/70405577/5823517也有办法做到这一点

【参考方案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])