React useContext获取值为undefined问题求助

核心问题 #

你遇到的undefined问题根源在于：UserName组件并没有处于lastNameContext.Provider的上下文覆盖范围内。

React的Context机制要求，使用useContext消费上下文值的组件，必须是对应Provider的后代组件。而你的代码里，Surname组件的Provider只包裹了自身内部的<h1>{lastName}</h1>，UserName是独立组件，不在该Provider的上下文树中，所以只能拿到createContext()初始化时的默认值（你未传入默认值，因此返回undefined）。

修复方案 #

有两种常用的修复方式：

方式1：在Surname组件中嵌套UserName #

修改Surname组件，将UserName作为Provider的子组件，让它进入上下文范围：

import {createContext, useState} from 'react'
import UserName from './UserName'

export const lastNameContext = createContext()

const Surname = () => {
  const [lastName, setLastName]= useState('Smith')
  return (
    <lastNameContext.Provider value={lastName}>
      <h1>{lastName}</h1>
      {/* 把UserName放入Provider内部 */}
      <UserName />
    </lastNameContext.Provider>
  )
}

export default Surname ;

方式2：将Provider提升到共同父组件 #

如果UserName和Surname需要在不同位置使用，可以把Provider移到它们的共同父组件（比如根组件）中，确保两者都处于上下文范围内：

// 根组件示例（如App.jsx）
import Surname from './Surname'
import UserName from './UserName'
import { lastNameContext } from './Surname'
import { useState } from 'react'

function App() {
  const [lastName, setLastName] = useState('Smith')
  return (
    <lastNameContext.Provider value={lastName}>
      <Surname />
      <UserName />
    </lastNameContext.Provider>
  )
}

export default App

同时修改Surname组件，去掉内部的Provider和状态，改为通过useContext获取值：

import { useContext } from 'react'
import { lastNameContext } from './Surname'

const Surname = () => {
  const lastName = useContext(lastNameContext)
  return <h1>{lastName}</h1>
}

export default Surname ;

验证逻辑 #

修复后，UserName作为Provider的后代组件，就能通过useContext正确获取到lastName的值。

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