Question

我正在使用React Hooks，并且正在创建一个页面，以便用户可以更改其帐户并保存。页面加载时，我希望禁用该按钮，因为该页面将显示以前保存的信息，并且由于未进行任何更改而无需保存。用户进行更改后，我将具有validate（）函数，该函数将检查他们所做的任何更改是否有效。如果是这样，则应启用该按钮。当用户单击“保存”按钮时，应禁用该按钮，并显示“正在保存”。保存完成后，该按钮仍应禁用，并显示“已保存”。

我有3个这样初始化的状态变量（disableButton首先为true，因为在登录页面时禁用了该按钮）。

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);
    }

    // ...
}

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

React Hooks-useState不会立即更新“ Saving ...”，“ Saved”状态

1 个答案: