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

【问题标题】：How to wait until state in useContext is completely loaded?如何等到 useContext 中的状态完全加载？
【发布时间】：2021-10-11 01:54:16
【问题描述】：

我想最初用“状态”中可用的全名值填充输入字段。但是当我重新加载页面时出现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 行）。

如何做到这一点？

【问题讨论】：

标签： reactjs use-state mern context-api use-context

【解决方案1】：

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

无论如何，如果您需要根据上下文数据创建本地状态，最好的方法是使用useEffect 作为Shubham Khatri 解释。

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

【讨论】：

【解决方案2】：

您可以使用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>

       )
}

【讨论】：