无法从PrimeReact Context调用changeTheme功能的问题求助

问题原因 #

你的代码直接调用useContext(PrimeReactContext)获取changeTheme，但未用PrimeReactProvider包裹整个应用。PrimeReactContext的上下文值仅在PrimeReactProvider的作用域内有效，超出范围调用useContext会返回undefined，进而触发解构报错。

解决方案 #

引入PrimeReactProvider并将应用根组件（Router部分）包裹在其中，确保useContext(PrimeReactContext)能正确获取包含changeTheme的上下文对象。

修改后的完整代码：

//CSS
import "./App.css";
import { useContext } from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import { PrimeReactContext, PrimeReactProvider } from "primereact/api";
import LoginPage from "./components/Loginpage";

//Prime React styles
import "primeflex/primeflex.css";
import "primereact/resources/themes/lara-light-indigo/theme.css";
import "primereact/resources/primereact.min.css";
import "primeicons/primeicons.css";

function App() {
    const { changeTheme } = useContext(PrimeReactContext);
    
    // 示例：点击按钮切换主题
    const handleThemeChange = () => {
        changeTheme("lara-dark-blue");
    };

    return (
        <PrimeReactProvider>
            <div className="App">
                <button onClick={handleThemeChange}>切换到深色主题</button>
                <Router>
                    <Routes>
                        <Route path="/" element={<LoginPage />} />
                    </Routes>
                </Router>
            </div>
        </PrimeReactProvider>
    );
}

export default App;

补充说明 #

• PrimeReactProvider是PrimeReact上下文的核心提供者，所有需要访问changeTheme等上下文方法的组件，都必须处于它的包裹层级内。
• 若LoginPage组件内也需调用changeTheme，同样要确保它在PrimeReactProvider的作用域下。

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