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

    // ...
}

這就是它的設計方式，因此您必須找到一種方法使其適用於您的用例。 隨意添加有關您的特定情況的更多詳細信息。