React.js 在 useState 設置默認值之前運行 useEffect

Question

我有一個叫做employee.js 的反應組件。 我使用這個組件來創建員工和更新員工。 我管理一個名為isUpdate的狀態。

在useEffect鈎子的幫助下，我更改了isUpdate=true 。 這意味着該組件可用作更新組件。 isUpdate默認值為 false。

我使用 formik 來做驗證部分。

useEffect(() => {
        if (props.location.state && props.location.state.update) {
            // update
                        
            console.log('line 1')
            
            getEmp(props.location.state.id);
            
            console.log('line 2')
        }
    }, [props.location.state, console.log('initial values', initialValues)]);

這是我的useEffect鈎子的代碼。 請注意控制台記錄“第 1 行”“第 2 行”和“初始值”之一。

我的問題是初始值甚至在第line 1之前打印。 所以當時初始值為空。 但是這些值設置為 formik 形式。 即使在初始值更改后，它也不會反映在 UI 中。

我來自 vuejs 世界，剛開始反應。 在 vuejs 中，它創建了生命周期鈎子。 它在任何事情之前運行。 這里的組件似乎在 useEffect 鈎子之前加載。

我怎樣才能在反應世界中解決這個問題？

Answer 1

useEffect在創建 DOM 並且渲染已提交到屏幕后運行。 所以如果你想在渲染之前做一些事情，你會想看看useLayoutEffect 。 大多數時候， useEffect是你所需要的，你只需要考慮異步數據流。

除非您提供依賴項數組，否則useEffect將運行每個渲染。 如果你提供一個依賴數組， useEffect只會在第一次運行，並且每次值數組改變時（不是數組本身，因為它的內存地址通常會在每次渲染時改變）。 我相信它執行的是淺層比較，因此您需要小心使用依賴項列表中的對象（mutable.js 對此非常有用）。

通過這兩條信息，您可以了解為什么您的代碼有點奇怪。

您使用要運行的函數和[props.state.location, console.log(...)]的依賴項列表調用useEffect ，這意味着useEffect將第一次運行，並且隨時props.state.location更改。 它看起來像一個對象，因此只要該對象的內存地址發生變化。 第二個參數將始終是未定義的，因此在這種情況下並沒有真正的用處。

您指出日志發生在useEffect函數運行之前。 這是有道理的，因為它是useEffect的參數，並且必須在調用useEffect方法之前評估參數。

讓我們重新審視你的問題。 聽起來您正在使用一種叫做 Formik 的東西，它被設置在initialValues但是它發生在第一次渲染之后，並且不會觸發新的渲染？ 我需要查看更多與initialValues相關的代碼，但這是我的猜測。 您可能直接在initialValues上設置一個值，而不是通過useState來useState 。 React 需要知道何時重新渲染組件，它通過監聽setState調用來實現。 它不會像 Mobx 或 VueJS 那樣做聰明的魔法東西，因此當您更改 state 某處的屬性時，它無法神奇地重新渲染自己。

// Creates a state variable called isUpdate and initializes it to false.
// On re-renders, it provides isUpdate with whatever value its been updated to
const [isUpdate, setIsUpdate] = useState(false);

// Sometime in the future

// changes state and causes a component to re-render
setIsUpdate(true);