React Hooks - useState 不会立即更新“正在保存...”、“已保存”状态

Question

我正在使用 React Hooks 并且我正在创建一个页面，以便用户可以更改他们的帐户并保存它。 当页面加载时，我希望该按钮被禁用，因为该页面将显示之前保存的信息，并且由于没有进行任何更改而无需保存。 一旦用户进行了更改，我就会有一个 validate() 函数来检查他们所做的任何更改是否有效。 如果是，则应启用该按钮。 当用户单击保存按钮时，该按钮应被禁用并显示“正在保存”。 完成保存后，该按钮仍应处于禁用状态，并应显示“已保存”。

我有 3 个像这样初始化的状态变量（disableButton 一开始为真，因为该按钮在登陆页面时被禁用）。

const [saved, setSaved] = useState(false);
const [isSubmitting, setSubmitting] = useState(false);
const [disableButton, setDisableButton] = useState(true);

我在某些事件发生时使用了 setState，例如，当用户单击保存按钮时：

const handleSubmit = async () => {
    setSaved(false);
    setSubmitting(true);
    setDisableButton(true);
...
}

我注意到这些更改不会立即进行，而是在下次渲染时进行，这对我来说是个问题。 我也研究了 useEffect ，但我不确定它是否适用于我的情况（或者我只是没有看到模式）。 我是 React 的新手，所以任何帮助将不胜感激。

Answer 1

React 中的所有状态更新在设计上都是异步的，因为它们一起尝试和批处理事件，而不是每次更改都触发渲染。

基于类的组件可以通过setState回调对状态更新做出反应：

onEvent = () => {
    this.setState({ key: value }, () => {
        console.log("I'm run when the state has been updated!");
    }); 
}

对于功能组件，该原则仍然适用，但方式不同：

export const SomeComponent = () => {
    const [value, setValue] = useState(false);

    useEffect(() => {
        console.log("I'm run whenever value changes!");
    }, [value]);

    function onEvent() {
        setValue(!value);
    }

    // ...
}

这就是它的设计方式，因此您必须找到一种方法使其适用于您的用例。 随意添加有关您的特定情况的更多详细信息。