如何等待useContext中的state完全加载完成后再执行后续操作？

问题原因 #

useState 的初始值仅会在组件首次渲染时执行一次，首次渲染时 Context 中的 state 还未加载完成为 null，就算后续 state 加载完成，本地的 fullname 状态也不会自动同步更新，所以才会出现初始值为空的情况。

解决方案1：添加useEffect同步状态 #

等 Context 的 state 加载完成后，手动更新本地的 fullname 状态：

import { useEffect } from 'react'

function EditProfile(){
    const {state,dispatch} = useContext(UserContext);
    // 初始值设为空避免报错
    const [fullname, setFullname] = useState("");

    // 监听state变化，state加载完成后同步到本地状态
    useEffect(() => {
        if (state?.fullname) {
            setFullname(state.fullname)
        }
    }, [state]) // 依赖项设置为state，state变化时自动触发执行

    return(
        <input 
            type="text" 
            placeholder="Name" 
            value={fullname}
            onChange={(e) => setFullname(e.target.value)} 
        />
    )
}

解决方案2：state加载完成后再渲染组件 #

在 state 未加载完成时先返回加载占位内容，等 state 存在后再初始化组件逻辑，此时 useState 就能直接拿到正确的初始值：

function EditProfile(){
    const {state,dispatch} = useContext(UserContext);
    
    // state未加载完成时先显示加载提示
    if (!state) return <div>加载中...</div>

    // 执行到此处state已存在，可直接初始化本地状态
    const [fullname, setFullname] = useState(state.fullname);

    return(
        <input 
            type="text" 
            placeholder="Name" 
            value={fullname}
            onChange={(e) => setFullname(e.target.value)} 
        />
    )
}

内容的提问来源于stack exchange，提问作者Sathishkumar R