MUI 与 LangaugeProvider 冲突

Question

我正在尝试在我的项目中使用 MUI React 设计，但似乎每当我尝试使用它时都会收到此错误

Cannot read properties of null (reading 'useContext')

。我不知道如何修复它，即使使用 MUI 也会引发此错误，在我看来它与 LanguageProvider 冲突。 App.js 中的所有路由都围绕 LanguageProvider 进行包装。我尝试使用 MUI 的组件代码如下所示。

import { Link } from 'react-router-dom';
import { AppBar, Toolbar, Button, Typography, Box, Menu, MenuItem } from '@mui/material';
import LanguageContext from '../LanguageContext';
import Login from './login';
import Register from './register';

const Navbar = ({ isLoggedIn, handleLogout, user, setIsLoggedIn, setUser }) => {
 const [showProfile, setShowProfile] = useState(false);
 const [showLogin, setShowLogin] = useState(false);
 const [showRegister, setShowRegister] = useState(false);
 const { language, switchLanguage } = useContext(LanguageContext);

 const toggleProfile = () => setShowProfile(!showProfile);
 
 const openLogin = () => {
   setShowLogin(true);
   setShowRegister(false);
 };
 
 const openRegister = () => {
   setShowRegister(true);
   setShowLogin(false);
 };

 return (
   <AppBar position="static" sx={{ backgroundColor: 'rgba(164, 136, 115, 0.9)', fontFamily: 'Kanit' }}>
     <Toolbar>
       <Typography variant="h6" component={Link} to="/" sx={{ flexGrow: 1, textDecoration: 'none', color: 'inherit' }}>
         eValgykla
       </Typography>
       
       <Box sx={{ display: 'flex', alignItems: 'center' }}>
         {isLoggedIn && !user?.isCashier && (
           <>
             <Button color="inherit" component={Link} to="/cart">{language.Cart}</Button>
             <Button color="inherit" onClick={() => switchLanguage('en')}>
               <img src="https://www.countryflags.com/wp-content/uploads/united-kingdom-flag-png-large.png" alt='English' width={25} height={15} />
             </Button>
             <Button color="inherit" onClick={() => switchLanguage('lt')}>
               <img src="https://cdn.countryflags.com/thumbs/lithuania/flag-400.png" alt='Lithuanian' width={25} height={15} />
             </Button>
             {user && user.isAdmin && (
               <Button color="inherit" component={Link} to="/admin">{language.AdminDashboard}</Button>
             )}
             <Button color="inherit" onClick={toggleProfile}>
               {language.Welcome}, {user?.Name || ''}
             </Button>
             {/* Profile Menu */}
             <Menu open={showProfile} onClose={toggleProfile}>
               <MenuItem component={Link} to="/account">{language.Account}</MenuItem>
               <MenuItem component={Link} to="/payment-history">{language.PaymentHistory}</MenuItem>
               <MenuItem component={Link} to="/your-children">{language.YourChildren}</MenuItem>
               <MenuItem component={Link} to="/help">{language.Help}</MenuItem>
               <MenuItem component={Link} to="/faq">{language.FAQ}</MenuItem>
               <MenuItem onClick={handleLogout}>{language.logout}</MenuItem>
             </Menu>
           </>
         )}

         {isLoggedIn && user?.isCashier && (
           <Button color="inherit" onClick={handleLogout}>{language.logout}</Button>
         )}

         {!isLoggedIn && (
           <>
             <Button color="inherit" onClick={openLogin}>{language.login}</Button>
             <Button color="inherit" onClick={openRegister}>{language.Register}</Button>
             {showLogin && <Login setIsLoggedIn={setIsLoggedIn} setUser={setUser} />}
             {showRegister && <Register onRegisterSuccess={() => { setShowLogin(true); setShowRegister(false); }} />}
           </>
         )}
       </Box>
     </Toolbar>
   </AppBar>
 );
};

export default Navbar;

Answer 1

您是否在 main.jsx 文件中使用 value 包装了提供程序？像这样

class App extends React.Component {
 render() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
 );

} }