使用React Context API传递后端数据时子组件获取到空数组如何解决

1. 状态更新逻辑错误 #

你初始化categories状态时指定了初始值为数组类型，但在请求成功后的setCategories调用中传入了对象类型，导致状态结构异常：

// 错误写法：初始为数组，更新时传入对象，导致类型不匹配
setCategories({categories:res.data})
// 正确写法：直接设置为接口返回的数组
setCategories(res.data)

补充说明：组件第一次渲染时会先执行console.log(categories)输出初始空数组，等到接口请求完成调用setCategories后，会触发组件重渲染，第二次打印才会显示接口返回的分类数据，这个是正常的异步渲染逻辑。

2. 类组件生命周期取值时机错误 #

componentDidMount只会在组件第一次挂载完成后执行一次，此时后端异步请求还未返回结果，context里的categories还是初始空值，所以拿不到更新后的数据，需要新增componentDidUpdate生命周期监听context变化：

static contextType = GlobalState

async componentDidMount(){
  const mystate = this.context
  console.log(mystate,'hey') // 此处打印的是初始状态值，属于正常情况
}

// 新增监听context更新的生命周期
componentDidUpdate(prevProps, prevState, prevContext) {
  // 对比前后context值，发生变化时执行业务逻辑
  if (this.context.categoriesAPI !== prevContext.categoriesAPI) {
    console.log('更新后的context值：', this.context)
    // 拿到最新categories后的业务逻辑写在这里
  }
}

3. 额外校验建议 #

• 确认你已经在应用根组件外层包裹了DataProvider，如果子组件没有在DataProvider的后代层级中，会读取到createContext的默认值（你没有指定默认值，所以会是undefined）
• 可以在getCategories方法中增加错误捕获，避免接口请求失败导致状态无更新：

const getCategories = async () =>{
  try {
    const res = await http.get(MyApiUrl+'/api/jobCategory');
    setCategories(res.data)
  } catch (err) {
    console.error('获取分类失败：', err)
  }
}

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