反應還原 | 全局 redux 狀態之前的本地狀態更新

Question

我正在嘗試創建一個包含表單的頁面，該表單在提交時會顯示一條消息。

• 提交此表單時，會根據表單中的內容顯示一條消息。
• 該消息是通過將表單的內容分派給我的 redux 操作來創建的，該操作執行一些邏輯，然后通過我的 reducer 更新我的 redux 存儲。
• 然后前端通過useEffect()檢查存儲中的消息。 但是，它僅根據本地狀態變量檢查消息，該變量跟蹤表單是否被單擊（以停止無限重新渲染）。

這是我到目前為止所做的

import reduxAction from "somewhere"

function page() {
    const reduxState = useSelector((state) => state.someGlobalState);
    const [localIndicator, setLocalIndicator] = useState(false); // tracks if form was submitted
    const [message, setMessage] = useState("")

    const onSubmit = async(formData) => {
        dispatch(reduxAction(formData))
        setLocalIndicator(true) // update the local indicator when the form is clicked
    }

    useEffect( () => {
        /* After I click the form, the local indicator updates to true
           so the message is updated. THE ISSUE IS the reduxState has not yet been updated!
           By the time it updates, this has already happened and so im displaying the old message
           not the new one
        */
        if (setLocalIndicator === true){
            setMessage(reduxState.message)
            setLocalIndicator(false) // to prevent infinite re-renders
        }
    })

    return(
        <Form onSubmit=onSubmit>
            ...
        {message}
    )


}

目前它不起作用，因為在我提交表單並發送表單數據后，本地狀態指示器更新但 redux 狀態在useEffect()運行之前沒有更新，因此表單重新渲染太早（ useEffect()應該只運行在 redux 狀態更新后或本地狀態指示器應該只在 redux 狀態更新后更新。

任何幫助將不勝感激。

Answer 1

您需要將reduxState.message和localIndicator添加到 useEffect 的依賴項數組中，以便它知道在更改時進行更新。 目前您的 useEffect 將在每個渲染周期運行，這並不理想：

useEffect( () => {
        /* After I click the form, the local indicator updates to true
           so the message is updated. THE ISSUE IS the reduxState has not yet been updated!
           By the time it updates, this has already happened and so im displaying the old message
           not the new one
        */
        if (setLocalIndicator === true){
            setMessage(reduxState.message)
            setLocalIndicator(false) // to prevent infinite re-renders
        }
    },[localIndicator, reduxState.message])