React Context API使用时Provider返回值除首项外均为undefined如何解决

你当前实现里，Provider传递的value是数组格式（[state, setState]），出现“仅能获取到第一个值，其余返回undefined”的问题，基本是消费侧的写法和传值格式不匹配导致的，常见问题和修正方式如下：

• 最常见错误：对数组类型的Context值误用对象解构语法
  不少开发者在写自定义Hook时习惯用数组返回值，写Provider传递数组值之后，消费时容易下意识用对象解构的语法取值，比如写成：

  // 错误写法
  const { state, setState } = useContext(AppContext)
  

  因为Context实际传递的是数组，数组本身不存在state、setState两个自定义属性，这种写法下所有自定义的取值都会返回undefined，如果你刚好解构到了数组内置的属性，就会出现“第一个值能拿到，其余全是undefined”的现象。
  匹配当前传值格式的正确写法应该用数组解构：

  // 正确写法
  const [state, setState] = useContext(AppContext)
  

• 索引取错导致的undefined问题
  部分开发者会拆分多次调用useContext取值，比如：

  // 错误写法
  const state = useContext(AppContext)[0] // 索引0对应state，取值正常
  const setState = useContext(AppContext)[2] // 数组只有0、1两个有效索引，取索引2自然返回undefined
  

  直接索引取值时，只要位置写错就会拿到undefined。

另外几个容易踩的坑也要逐一核对：

• 检查Context的引入方式：你当前代码里AppContext是命名导出，消费侧必须用import { AppContext } from "Provider文件路径"的方式引入，如果错写成默认引入，拿到的其实是MyProvider组件本身，取值会完全异常。
• 检查Provider包裹层级：确保消费Context的组件是在<MyProvider>的内部渲染的，如果层级错位，就会拿到createContext的默认值（你当前没传默认值，默认是undefined），也会出现取值异常。

优化建议：你当前Provider的传值方式其实可以调整成对象格式，避免消费侧记错索引位置，比如把Provider的value改成value={{ state, setState }}，消费时就可以用对象解构的方式取值，更不容易出错。

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