React Context Hook获取值返回undefined问题求助

你调用useContext的时机不对：App组件本身是FeedbackProvider的父组件，useContext(FeedackContext)在FeedbackProvider渲染之前执行，根本无法获取到Provider提供的上下文值，所以返回undefined。

有两种可行的修复方式：

方式一：将Context访问逻辑移到Provider包裹的子组件中 #

修改App.jsx，创建一个专门的子组件来读取Context值：

import { useContext } from 'react'
import './App.css'
import FeedackContext, { FeedbackProvider } from './context/FeedbackContext'

// 子组件：在Provider内部，可正常访问Context
function FeedbackViewer() {
    // 注意解构出feedback，因为Provider传递的是{ feedback }对象
    const { feedback } = useContext(FeedackContext)
    console.log(typeof feedback)
    // 因为feedback是数组/对象，直接渲染需要转成字符串
    return <div>{JSON.stringify(feedback)}</div>
}

function App() {
    return (
        <FeedbackProvider>
            <FeedbackViewer />
        </FeedbackProvider>
    )
}

export default App

方式二：重构App组件，让其仅作为Provider容器 #

如果希望在App组件的逻辑中访问Context，可以把App的业务逻辑拆到内部子组件里：

import { useContext } from 'react'
import './App.css'
import FeedackContext, { FeedbackProvider } from './context/FeedbackContext'

function AppContent() {
    const { feedback } = useContext(FeedackContext)
    console.log(typeof feedback)
    return <div>{JSON.stringify(feedback)}</div>
}

function App() {
    return (
        <FeedbackProvider>
            <AppContent />
        </FeedbackProvider>
    )
}

export default App

代码里存在拼写错误：FeedackContext应该是FeedbackContext（缺少字母'b'），虽然当前不影响功能，但建议统一修正，避免后续维护时混淆。

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