如何等到 useContext 中的状态完全加载？

Question

我想首先用“state”中可用的全名值填充输入字段。但是当我重新加载页面时出现 TypeError: Cannot read property 'fullname' of null 错误，因为当时状态尚未加载。

function EditProfile(){
    const {state,dispatch}= useContext(UserContext); //line 1

    const [fullname, setFullname]= useState(state.fullname); //line 2


    return(
           <input type="text" placeholder="Name" value={fullname}></input>

       )
}

我试过像这样更改第 2 行：

const [fullname, setFullname]= useState(state?state.fullname:"");

这次我没有收到任何错误。但是输入字段包含空字符串而不是 state.fullname 值。

我希望在为全名定义 useState（第 2 行）之前完全加载状态（第 1 行）。

如何实现？

Answer 1

您可以利用useEffect在获取上下文数据时更新状态

function EditProfile(){
    const {state,dispatch}= useContext(UserContext); //line 1
  
    const [fullname, setFullname]= useState(state?.fullname); //line 2

    useEffect(() => {
        setFullname(state?.fullname);
    }, [state?.fullname]);
    return(
           <input type="text" placeholder="Name" value={fullname}></input>

       )
}

Answer 2

如果您通过上下文共享响应式数据，则无需创建另一个本地状态，因为它已经是响应式的。此外，更新消费者组件上的数据会导致消费者和提供者组件之间的数据状态不同步。如果您需要更新消费者组件中的提供者状态，您可以通过上下文共享一个函数来改变状态。

无论如何，如果您需要根据上下文数据创建本地状态，最好的方法是使用 useEffect，如所述。

useEffect(() => {
  setFullname(state?.fullname)
}, [state])

如何等到 useContext 中的状态完全加载？

How to wait until state in useContext is completely loaded?

reactjs

mern

react-context

use-state

use-context