React Context报错：无法解构_ref的children属性，求解决方案

错误信息 #

TypeError: Cannot destructure property 'children' of '_ref' as it is undefined，报错位置在UserContext.js文件。

问题原因 #

1. 类型不匹配引发渲染异常：UserContext.js中userDefault的isLoading被设为字符串"true"，而非布尔值true，导致App.js中user.isLoading == true的判断出现类型转换问题，可能触发渲染分支异常，使UserProvider的children在部分场景下变为undefined。
2. 路径判断逻辑错误：useEffect中的条件使用||，此逻辑永远为true（路径不可能同时等于'/'和'login'），导致登录页/根路径也会执行fetchUser，引发不必要的状态变更。
3. logout函数破坏状态结构：logout里的setUser直接替换整个user对象结构，丢失了isLoading、isAuthenticate等原有属性，间接引发渲染错误。

解决方法 #

1. 修正isLoading的类型 #

在UserContext.js中，将userDefault里的isLoading改为布尔值：

const userDefault={
  isLoading: true, // 替换原字符串"true"为布尔值true
  isAuthenticate: false,
  token: "",
  account: {}
}

2. 修复路径判断逻辑 #

将useEffect中的||替换为&&，确保仅在非根路径且非登录页时执行fetchUser：

useEffect(() => {
  // 修正逻辑：不是根路径 并且 不是登录页时执行请求
  if (window.location.pathname !== '/' && window.location.pathname!=='/login') {
    fetchUser()
  }
},[])

3. 修正logout函数的状态更新逻辑 #

保持user对象结构一致，复用userDefault的结构：

const logout = () => {
  setUser({
    ...userDefault,
    isLoading: false
  });
};

4. 优化App组件的条件判断 #

使用全等运算符===避免类型转换问题，同时修正拼写错误：

{user && user.isLoading === true ? <Audio
  height="100" // 修正原代码拼写错误：heigth → height
  width="100"
  color='grey'
  ariaLabel='loading'
/> : (...)}

验证 #

修改完成后重启项目：

• 登录页/根路径不会触发fetchUser请求
• 状态结构保持一致，无属性缺失问题
• 渲染逻辑正常，UserProvider的children始终为有效React元素，报错消失

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