React使用createContext、useContext时获取user值返回undefined求助

核心错误点1：useState 解构语法错误 #

useState 调用后返回值是数组，必须使用数组解构语法获取状态和更新方法，你当前用对象解构写法，根本拿不到状态值，user 初始就是undefined。

// 原错误写法
const {user, setUser} = useState([{
  id: 1,
  name: 'username'
}])

// 修正写法
const [user, setUser] = useState([{
  id: 1,
  name: 'username'
}])

核心错误点2：useContext 传入参数与导入变量不匹配 #

你在UserList组件中导入的Context变量名为UsersContext，但调用useContext时传入的是未定义的UserContext（变量名少了s），直接导致Context取值失败。另外React组件名必须大写开头，原代码小写开头的组件名会被识别为原生DOM节点，也会引发渲染异常。

// 原错误写法
import UsersContext from "../context/UserContext"
function userList({handleDelete}) {
  const {user} = useContext(UserContext)
  // ...
}

// 修正写法：注意同时核对Context文件的实际路径/文件名，保持导入名和使用名一致
import UsersContext from "../context/UsersContext"
function UserList({handleDelete}) {
  const {user} = useContext(UsersContext)
  console.log(user)
  // ...
}

必做校验项：确认Provider包裹范围 #

Context生效的前提是，消费Context的组件必须作为UsersProvider的子节点渲染，如果你的应用根节点没有包裹Provider，且createContext时没有传入初始默认值，拿到的Context值也会是undefined。
根组件正确包裹示例：

import { UsersProvider } from "./context/UsersContext"
import UserList from "./components/UserList"

function App() {
  return (
    <UsersProvider>
      {/* 所有用到UsersContext的组件必须放在Provider标签内部 */}
      <UserList />
    </UsersProvider>
  )
}

优化建议 #

初始化Context时可以传入和value结构一致的默认值，降低排查成本：

const UsersContext = createContext({
  user: []
})

完成以上修正后，控制台即可正常输出预期的用户数组数据。

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