React Hooks - useState 不会立即更新 "Saving..."、"Saved" 状态

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 中的所有状态更新在设计上都是异步的，以尝试将事件一起批处理，而不是每次更改都触发渲染。

基于

Class 的组件可以通过 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);
    }

    // ...
}

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

React Hooks - useState 不会立即更新 "Saving..."、"Saved" 状态

React Hooks - useState does not update "Saving...", "Saved" states immediately

javascript

reactjs

react-hooks

use-effect

use-state