useUserContext 提供程序未将数据发送到个人资料页面

Question

问题描述

我面临一个问题，存储在

useUserContext

中的数据似乎无法从我的 React 应用程序中的登录页面正确传递到配置文件页面。我已经彻底检查了我的代码，尽管数据已成功记录在

useUserContext

中，但在“个人资料”页面中显示为

null

。

代码示例

useUserContext.js

import { createContext, useState, useContext } from 'react';

const UserContext = createContext();

export function useUserContext() {
  return useContext(UserContext);
}

export function UserContextProvider({ children }) {
  const [user, setUser] = useState(null);

  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
}

应用程序.js

import React from 'react';
import { Route, Routes } from 'react-router-dom';
import "./styles/signup.css";
import "./styles/login.css";
import "./styles/profile.css";
import Navbar from './components/Navbar';
import Signup from './components/Signup';
import Login from "./components/Login";
import Homepage from './components/Homepage';
import Notifications from './components/Notifications';
import Profile from './components/Profile';
import Interpage from './components/Interpage';
import Yourvideos from './components/Yourvideos';
import Tagline from './components/Tagline';
import Trending from './components/Trending';
import { UserContextProvider } from "./components/Usercontext";
import CreateVideo from './components/Createvideo';

function App() {
  const isCreateVideo = window.location.pathname.startsWith('/createvideo');

  return (
    <div>
      <UserContextProvider>
        {!isCreateVideo && <Navbar />}
        {!isCreateVideo && <Interpage />}
        <Routes>
          <Route exact path="/" element={<Signup />} />
          <Route exact path="/login" element={<Login />} />
          <Route exact path="/home" element={<Homepage />} />
          <Route exact path="/notifications" element={<Notifications />} />
          <Route exact path="/profile" element={<Profile />} />
          <Route exact path="/yourvideos" element={<Yourvideos />} />
          <Route exact path="/tagline" element={<Tagline />} />
          <Route exact path="/trending" element={<Trending />} />
          <Route exact path="/createvideo" element={<CreateVideo />} />
        </Routes>
      </UserContextProvider>
    </div>
  );
}

export default App;

配置文件.jsx

import React from 'react';
import userImage from '../images/Profile.jpg';
import { useUserContext } from './Usercontext';

const Profile = () => {
  const { user } = useUserContext();

  return (
    <div className="page-container">
      <div className="profile-page-container">
        <div className="profile-row">
          <div className="profile-box user-image-box">
            <img src={userImage} alt="User" className="user-image round-user-image" />
          </div>
          <div className="profile-box name-box">
            <i className="fa-solid fa-user"></i>
            <span className="element-label">Name:</span>
            <span className="element-value">{user && user[0]}</span>
          </div>
        </div>
        <div className="profile-row">
          <div className="profile-box email-box">
            <i className="fa-solid fa-envelope"></i>
            <span className="element-label">Email:</span>
            <span className="element-value">{user && user[1]}</span>
          </div>
          <div className="profile-box phone-box">
            <i className="fa-solid fa-phone"></i>
            <span className="element-label">Phone:</span>
            <span className="element-value">{user && user[2]}</span>
          </div>
        </div>
        <div className="profile-row">
          <div className="profile-box dob-box">
            <i className="fa-solid fa-calendar"></i>
            <span className="element-label">Date of Birth:</span>
            <span className="element-value">{user && user[3]}</span>
          </div>
          <div className="profile-box dob-box">
            <i className="fa-solid fa-location-pin"></i>
            <span className="element-label">Location:</span>
            <span className="element-value">{user && user[4]}</span>
          </div>
        </div>
        <div className="user-bio">
          <h2>Bio</h2>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </p>
        </div>
      </div>
    </div>
  );
};

export default Profile;

登录.jsx

import React from 'react';
import { useState } from 'react';
import { useUserContext } from './Usercontext';
import { useNavigate } from 'react-router-dom';
import { getDocs, collection, query, where } from 'firebase/firestore';
import { db } from './firebaseconfig';

const Login = () => {
  const Navigate = useNavigate();
  const [data, setData] = useState({
    email: '',
    password: ''
  });
  const { setUser } = useUserContext();

  const handleInput = (event) => {
    let newInput = { [event.target.name]: event.target.value };
    setData({ ...data, ...newInput });
  };

  const handleLogin = async (event) => {
    event.preventDefault();

    const { email, password } = data;

    const usersRef = collection(db, 'users');
    const q = query(usersRef, where('email', '==', email));
    const querySnapshot = await getDocs(q);

    if (querySnapshot.empty) {
      alert('Login failed: User not found');
      return;
    }

    const userDoc = querySnapshot.docs[0];
    const userData = userDoc.data();
    const userArray = [userData.name, userData.email, userData.phoneNumber, userData.dob, userData.country];

    if (userData.password === password && userData.email === email) {
      setTimeout(() => {
        setUser(userArray);
        Navigate('/home');
      }, 1000);
    } else {
      alert('Login failed: Incorrect password');
    }
  };

  return (
    <div className='login_page'>
      <div className='login_box'>
        <form className='login_input_box' action='/login'>
          <h2 className='login_top_topic'>Login</h2>

          <div className='login-wrapper-input'>
            <i id='i_tags' className='fa-solid fa-envelope'></i>
            <input
              type='email'
              name='email'
              onChange={handleInput}
              placeholder='Email'
              autoComplete='off'
              value={data.email}
            />
          </div>

          <div className='login-wrapper-input'>
            <i id='i_tags' className='fa-solid fa-lock'></i>
            <input
              type='password'
              name='password'
              onChange={handleInput}
              placeholder='Password'
              autoComplete='off'
              value={data.password}
            />
          </div>

          <button className='login_button' onClick={handleLogin}>
            Login
          </button>
        </form>
        <p className='Not_have_Account'>
          Not Have Account <a className='Not_have_Account_p' href='/'>
            Create a Account
          </a>
        </p>
      </div>
    </div>
  );
};

export default Login;

Answer 1

您似乎正在使用原始锚标记来影响应用程序周围的导航。它们向服务器发出请求并使用新的 URL 路径重新加载页面。

您应该从

Link

导入并渲染

NavLink

或

react-router-dom

组件，而不是原始锚标记。

示例：

import { Link } from 'react-router-dom';

const Interpage = () => {
  return (
    <div className="cards_div_down_xyzab">
      <div>
        <Link to="/profile">
          <img src={profile_img} alt="" />
        </Link>
        <p>DILIP KUMAR</p>
      </div>
      <p className="Interpage_main_verticaline_rsdab" /> 
    </div>
  );
};

export default Interpage;