React中useEffect在organizationData状态更新前读取属性报错如何解决

问题根源 #

• Context Provider传值语法错误：React Context的Provider必须通过value属性传递共享数据，你直接写organizationData={organizationData}属于给Provider添加了无效的自定义属性，子组件从Context中根本拿不到正确的organizationData，拿到的是创建Context时的默认值，如果默认值为undefined，读取orgName自然会报错。
• 数据类型读取错误：organizationData是数组类型，你直接读取organizationData.orgName属于对数组取不存在的属性，就算数据请求成功，数组本身也没有orgName属性，只有数组内的元素才有该属性。
• useEffect依赖项缺失：子组件的useEffect没有把organizationData加入依赖数组，只会在组件第一次挂载时执行，此时接口请求还未完成，拿到的永远是初始值，就算后续Context数据更新也不会重新执行填充逻辑。
• 兜底逻辑不完善：你用的短路运算只处理了orgName为假值的情况，没有处理organizationData本身或要读取的数组元素为undefined的情况，还是会触发读取属性的报错。

修复步骤 #

1. 修正Context Provider传值语法 #

通过value属性传递共享数据，如果创建Context时没有设置默认值，也可以同步补全避免初始值为undefined：

// 创建Context时补全默认值
const AuthContext = createContext({
  organizationData: []
})

// Provider传值修正
<AuthContext.Provider value={{ organizationData }}>
    {children}
</AuthContext.Provider>

2. 修正数据读取逻辑+完善安全兜底 #

因为organizationData是数组，如果你需要取第一个元素的orgName，用可选链做层级兜底，哪怕数据为空也不会报错：

orgName: organizationData?.[0]?.orgName || ""

3. 给useEffect添加正确依赖项 #

把organizationData加入useEffect依赖数组，只要Context中的数据更新就会重新执行填充逻辑，同时用setState的函数式更新写法，避免依赖fillingData导致不必要的重复执行：

useEffect(() => {
    setFillingData(prev => ({
      ...prev,
      orgName: organizationData?.[0]?.orgName || "",
      // 其他字段同理添加可选链兜底
  }))
}, [organizationData])

4. 可选优化：通过加载状态控制渲染 #

可以利用已有的orgLoading状态，在数据请求完成前渲染加载占位，避免子组件在数据就绪前执行逻辑：

{
  !orgLoading ? (
    <AuthContext.Provider value={{ organizationData }}>
      {children}
    </AuthContext.Provider>
  ) : <Loading />
}

额外小修正：你当前的organizationFunction里setOrgLoading的位置有误，现在是接口请求发出后就立刻设为true，正确逻辑应该是请求前开启loading，请求完成无论成功失败都关闭：

const organizationFunction = async () => {
    try {
        setOrgLoading(true)
        const res = await axios.get(API_URL + `organizations/${someUniqueId}`)
        const masterData = res.data.master
        const contactData = res.data.contact
        const combinedData = masterData.map((item, i) => Object.assign({}, item, contactData[i]))
        setOrganizationData(combinedData)
    } catch (e) {
        alert(e)
    } finally {
        setOrgLoading(false)
    }
}

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