ReactPage 显示空白屏幕 - 无法找出错误

Question

我正在尝试重写我现有的代码，这些代码在 React Context 的帮助下使用了 props 链 API

我将包含上下文文件和其他重要文件一个小时以来，我一直在努力找出我哪里出错了，但无法弄清楚

App.js 文件

import "./App.css";
import { useContext } from "react";
import LoginPage from "./Login/LoginPage";
import NewPost from "./Posts/NewPost";
import PostList from "./Posts/PostList";
import Signup from "./Signup/Signup";
import AuthContext from "./store/auth-context";
import { AuthContextProvider } from "./store/auth-context";

const expenses = [
  {
    name: "Lakshay Gupta",
    content:
      " Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.",
    posted: "5mins ago",
    comments: "16 comments",
  },
  {
    name: "Naman Sukhija",
    content:
      " Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.",
    posted: "1hour ago",
    comments: "24 comments",
  },
  {
    name: "William Harris",
    content:
      " Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.",
    posted: "3mins ago",
    comments: "29 comments",
  },
];

function App() {
  const ctx = useContext(AuthContext);
  return (
    <AuthContextProvider className="App">
      {!ctx.isLoggedIn && <LoginPage></LoginPage>}
      {ctx.isLoggedIn && (
        <div className="posts-area">
          {ctx.registerIsShown && <Signup></Signup>}
          <NewPost></NewPost>
          <PostList items={expenses}></PostList>{" "}
        </div>
      )}
    </AuthContextProvider>
  );
}

export default App;

auth-context.js 文件

import React from "react";
import { useState } from "react";

const AuthContext = React.createContext({
  isLoggedIn: false,
  registerIsShown: false,
  onLogin: (email,pass) => {}, 
  onShow: () => {} ,
  onHide: () => {}
});

export const AuthContextProvider = (props) => {
  const [isLoggedIn, setLogin] = useState(false);

  const submitLoginHandler = () => {
    setLogin(!isLoggedIn);
  };

  const [registerIsShown, setRegisterIsShown] = useState(false);

  const showRegisterHandler = () => {
    setRegisterIsShown(true);
  };

  const hideRegisterHandler = () => {
    setRegisterIsShown(false);
  };

  return (
    <AuthContext.Provider
      value={{
        isLoggedIn: isLoggedIn,
        registerIsShown: registerIsShown,
        onLogin: submitLoginHandler,
        onShow: showRegisterHandler,
        onHide:  hideRegisterHandler
      }}
    />
  );
};
export default AuthContext;

Login.js 文件

import React from "react";
import "./LoginPage.css";
import AuthContext from "../store/auth-context";
import { useContext } from "react";

export default function LoginPage(props) {
const loginCtx = useContext(AuthContext);
  return (
    <div className="loginpage">
      <form className="form-dimensions">
          <div className="mb-4 custom-heading">
              WELCOME BACK
          </div>
          <div className="mb-4 custom-subheading">
              Login into your account
          </div>
        <div className="mb-3">
          <label htmlFor="exampleInputEmail1" className="form-label email-custom-login form-color">
            Email or Username
          </label>
          <input
            type="email"
            className="form-control"
            id="exampleInputEmail1"
            aria-describedby="emailHelp"
            placeholder="Enter your email or username"
          />
          
        </div>
        <div className="mb-3">
            <div className="label-inline">
          <label htmlFor="exampleInputPassword1" className="form-label form-color password-custom-login label-inline">
            Password                                     
          </label>
          <label htmlFor="exampleInputPassword2" className="forgot-password-custom form-label form-color label-inline">
              Forgot password?
          </label>
            </div>
          
          
          <input
            type="password"
            className="form-control"
            id="exampleInputPassword1"
            placeholder="Enter your password"
          />
        </div>
        
        {console.log(loginCtx)}
        <button type="submit" className="btn btn-primary" onClick={loginCtx.onLogin} >
          Login now
        </button>
        <div className="custom-ending">
            Not registered yet? <span>Register →</span>
        </div>
      </form>
    </div>
  );
}

Answer 1

我认为这是因为您的 Auth Context 提供程序根本不呈现其 children。您应该在 return 语句中呈现 children，如下所示：

return (
    <AuthContext.Provider
      value={{
        isLoggedIn: isLoggedIn,
        registerIsShown: registerIsShown,
        onLogin: submitLoginHandler,
        onShow: showRegisterHandler,
        onHide:  hideRegisterHandler
      }}
    >{props.children}</AuthContext.Provider>
  );

ReactPage 显示空白屏幕 - 无法找出错误

ReactPage showing blank screen - can't figure out the error

javascript

reactjs

react-context