Question

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

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

根据checked的值，我修改了一些其他常量。但是，我遇到了checked值没有立即更新的问题。这一切都是通过这种方法进行的：

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

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

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

谢谢。

Answer 1

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

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

具有useState的state更新程序也不像类组件中的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])

Answer 2

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

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

useState函数不会立即更新

2 个答案: