Question

您好，我的反应还是很新，我遇到了一个问题和错误：

错误：元素类型无效：预期为字符串（对于内置组件）或类/函数（用于复合组件），但得到：未定义。您可能忘记了从文件中导出组件它是在其中定义的，或者您可能混淆了默认名称和命名导入

。

我创建了auth组件，该错误提到“检查AuthProvider的呈现方法”，我怀疑该错误来自auth组件中的“ AuthProvider”功能，我不确定如何解决它。

auth.js

import React, { useReducer, createContext } from "react";


const AuthContext = createContext({
  user: null,
  login: (userData) => {},
  logout: () => {},
});

function authReducer(state, action) {
  switch (action.type) {
    case "LOGIN":
      return {
        ...state,
        user: action.payload,
      };
    case "LOGOUT":
      return {
        ...state,
        user: null,
      };
    default:
      return state;
  }
}

function AuthProvider(props) {
  const [state, dispatch] = useReducer(authReducer, { user: null });

  function login(userData) {
    dispatch({
      type: "LOGIN",
      payload: userData,
    });
  }

  function logout() {
    dispatch({ type: "LOGOUT" });
  }

  return (
    <AuthContext.provider
      value={{ user: state.user, login, logout }}
      {...props}
    />
  );
}

export { AuthContext, AuthProvider };

app.js

//import from react library
import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";

//import from component folder
import { AuthProvider } from "./config/auth";
import Dashboard from "./dashboard/pages/Dashboard";
import Signin from "./login/pages/Signin";
import AdminPage from "./admin/pages/AdminPage";
import Login from "./login/pages/Login";

// import AssetPage from './asset/pages/AssetPage'
// import MaterialTables from './component/MaterialTable'

function App() {
  return (
    <>
      <AuthProvider>
        <Router>
          <Route exact path="/" component={Login} />
          <Route path="/dashboard" component={Dashboard} />
          <Route path="/admin" component={AdminPage} />
          {/* <Route path="/login" component={Login} /> */}

          {/* <Route path="/asset" component={AssetPage}/> */}
        </Router>
      </AuthProvider>
    </>
  );
}

export default App;

收到错误：检查`AuthProvider`的渲染方法

0 个答案: