为什么无法在React全局上下文返回data数组，调用map时报undefined错误

问题原因 #

你遇到的报错由两个错误共同导致：

• data.js 中定义的 reviews 数组没有设置默认导出，context.js 导入的 data 实际为 undefined，因此 reviews 状态的初始值就是 undefined
• AppContext.Provider 的 value 属性直接传入了 reviews 数组本身，但你在 Form.js 中用对象解构的方式读取 reviews 属性，相当于从数组中取不存在的 reviews 字段，最终得到 undefined，调用 map 方法就触发了报错

修复方案 #

1. 修复 data.js，末尾添加导出语句：

// data.js 末尾新增
export default reviews;

2. 调整 context.js 中 Provider 的 value 格式，改为对象形式（方便后续扩展传入其他状态、更新方法）：

// context.js 中修改Provider返回部分
return (
  <AppContext.Provider 
    value={{
      reviews,
      setReviews,
      isLoading,
      setIsLoading
    }}
  >
    {children}
  </AppContext.Provider>
);

调整后你在 Form.js 中解构获取 reviews 的写法不需要改动，即可正常读取到数组。

如果你暂时不需要传入其他状态，也可以直接修改 Form.js 的取值方式，不需要解构：

// Form.js 中修改取值逻辑
const reviews = useGlobalContext();

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