Question

尝试以生产模式打开网站时出现错误，在部署网站时出现此错误

react-dom.production.min.js:216 TypeError: Cannot read property 'logged' of null
at Q (AppRouter.jsx:24)
at al (react-dom.production.min.js:157)
at Hi (react-dom.production.min.js:267)
at Ou (react-dom.production.min.js:250)
at Cu (react-dom.production.min.js:250)
at xu (react-dom.production.min.js:250)
at vu (react-dom.production.min.js:243)
at fu (react-dom.production.min.js:237)
at Gu (react-dom.production.min.js:285)
at react-dom.production.min.js:289

Uncaught TypeError: Cannot read property 'logged' of null
at Q (AppRouter.jsx:24)
at al (react-dom.production.min.js:157)
at Hi (react-dom.production.min.js:267)
at Ou (react-dom.production.min.js:250)
at Cu (react-dom.production.min.js:250)
at xu (react-dom.production.min.js:250)
at vu (react-dom.production.min.js:243)
at fu (react-dom.production.min.js:237)
at Gu (react-dom.production.min.js:285)
at react-dom.production.min.js:289

这些是一些组件

类型：

    export const types = {

    login: '[auth] login',
    logout: '[auth] logout'

}

AuthReducer：

    import { types } from "../types/types";

export const AuthReducer = ( state={}, action ) => {

    switch (action.type) {
        case types.login :
            return {
                ...action.payload,
                logged: true
            }
        
        case types.logout:
            return {
                logged: false
            }
            
    
        default:
            return state;
    }
}

上下文

    import { createContext } from 'react'

export const AuthContext = createContext();

**App.jsx:**

    import { Fragment, useReducer, useEffect } from "react";
import { AuthContext } from "./auth/authContext";
import { AuthReducer } from "./auth/authReducer";
import { AppRouter } from "./routers/AppRouter";


function App() {

  const init = () => {
    return JSON.parse( localStorage.getItem( 'user' ) )
  }

  const [user, dispatch] = useReducer(AuthReducer, {}, init)

  useEffect(() => {
    localStorage.setItem('user', JSON.stringify(user))
  }, [user])

  return (
    <Fragment>
      
      <AuthContext.Provider value={{
        user,
        dispatch
      }}>
        <AppRouter/>
      </AuthContext.Provider>
            
    </Fragment>
  );
}

export default App;

仪表板路线

    export const DashBoardRouter = () => {
    return(
        <>
            <NavBar/>
            
            <Switch>
                <Route exact path="/" component={ HomePage } />
                <Route exact path="/about" component={ AboutPage } />
                <Route exact path="/marvel" component={ MarvelPage } />
                <Route exact path="/dc" component={ DcPage } />
                <Route exact path="/heroe/:heroeId" component={ HeroPage } />
                <Route exact path="/search" component={ SearchPage } />
            </Switch>
            <Footer/>
            
        </>
    )
}

当我将项目部署到诸如netlify之类的主机中时，就会出现问题，在开发模式下，所有代码都能正常工作。如您所见，我只使用reactjs，react-router-dom，context和reducer，我在gitHub的一些问题中看到，问题可能是上下文，但我不知道如何解决此问题。 / p>

当我用Reactjs部署项目时出现TypeError

0 个答案: