使用createContext/useContext传递权限时遇未定义错误及返回undefined问题

问题原因 #

• AuthStatusContext 在 App 组件内部创建，作用域仅限组件内部，Products.js 无法访问该变量，因此触发 no-undef 错误。
• 组件内部创建上下文会导致 App 每次重新渲染时生成新的上下文实例，useContext 无法稳定获取正确值。

解决方案 #

1. 移到组件外创建并导出上下文 #

将 AuthStatusContext 从 App 组件内部移出并导出，让其他组件可导入使用。修改后 App.jsx 代码：

import React, { createContext, useEffect, useState } from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

// 在组件外部创建并导出上下文
export const AuthStatusContext = createContext();

function App() {
  const [userHasAdminAccess, setUserHasAdminAccess] = useState(true);
  
  return (
      <div className="App">
        <Router>
          <AuthStatusContext.Provider value={userHasAdminAccess}>
            <Navbar />
            <Routes>
              <Route path="/" element={<Home />} />
              {/* 修复Cart组件标签未闭合的错误 */}
              <Route path='/cart' element={<Cart />} />
              <Route path='/products' element={<Products/>} />
             </Routes>
          </AuthStatusContext.Provider>
        </Router>
      </div>
  );
}
export default App;

2. 在Products.js中导入上下文使用 #

在 Products.jsx 里导入导出的上下文，再通过 useContext 获取值：

import React, {useState, useEffect, useContext} from 'react'
import axios from 'axios'
// 导入AuthStatusContext
import { AuthStatusContext } from './App';

function Products() {
  const userIsAdmin = useContext(AuthStatusContext);
  const [posts, setPosts]= useState([])
  
  useEffect(() => {
      // 业务逻辑代码
  }, [])

  return (
    // 组件渲染内容
  )
}

export default Products;

优化建议 #

可以把上下文单独放在独立文件（比如 AuthContext.js）中，方便多组件统一导入，结构更清晰：

// AuthContext.js
import { createContext } from 'react';

export const AuthStatusContext = createContext();

之后在 App.jsx 和 Products.jsx 中都从该文件导入上下文即可。

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