如何在页面底部显示详细信息（useState 对象）？

Question

我的反应代码：图像包含控制台结果

在第一次获取中 - 我提供电子邮件和密码以登录。 在第二次提取中 - 它正在使用第一次提取中使用的电子邮件 ID 提取数据。

我需要显示我在控制台中突出显示的结果。 就像同一登录页面底部的学生 ID、fname、lname、电子邮件、密码一样。 我还想传递详细信息以显示在另一个页面上。

 import './Login.css' import { FcGoogle } from "react-icons/fc" import { FaGithub, FaFacebook } from "react-icons/fa" import { Link } from 'react-router-dom' import React,{ useState } from 'react' import { useNavigate } from 'react-router-dom' import { useEffect } from 'react' const Login = () =>{ const showConsole =()=>{ //onclick it will display on console console.log("I am google, facebook, github"); } const navigate = useNavigate(); const [email, setEmail] = React.useState(""); const [password, setPassword] = React.useState(""); const [details, setDetails] = React.useState({}); function Login(){ let item = {password, email}; console.log(item); fetch("http://localhost:8080/student/login",{ method:'POST', body:JSON.stringify(item), headers:{ "Content-Type":'application/json', "Accept":'application/json' } }).then((e)=>{ if(e.status === 200){ console.log("Success",e) window.alert("Student Logged in successfully"); fetch(`http://localhost:8080/student/oneStudentEmail?email=${email}`,{ method:'GET', headers:{ "Content-Type":'application/json', "Accept":'application/json' } }).then((student)=>student.json()) .then((result)=>{ // console.log(result); setDetails(result); }) }else{ console.log("Not found",e,item) window.alert("Not found",item); } }) console.log(details); } return ( <> <div className='main_login'> <div><button className="btn_google" onClick={showConsole}><FcGoogle /></button></div> <div><button className="btn_github" onClick={showConsole}><FaGithub /></button></div> <div><button className="btn_facebook" onClick={showConsole}><FaFacebook /></button></div> <div className="col-sm-6 offset-sm-3"> <h3>Enter Details</h3> {/* input boxes */} <input type="text" className="form-control" placeholder="Email" value={email} onChange={(e)=>{setEmail(e.target.value)}} /><br/> <input type="password" className="form-control" placeholder="Password" value={password} onChange={(e)=>setPassword(e.target.value)} /><br/> <button className="btn btn-primary" onClick={Login} > Login </button><br/> Already have an Account?<Link to="/sign-up">Sign Up</Link> </div> {/* {Here I want to show details also let me know how can I pass this details to another page} */} </div> </> ) } export default Login;

Answer 1

假设您的result是{id:string, fname:string , lname: string, email: string, password: string}类型。 您可以通过以下方式显示数据：

<div class="row">
   <div>Student ID: {details.id}</div>
   <div>Student First Name: {details.fname}</div>
   <div>Student Last Name: {details.lname}</div>
   <div>Email: {details.email}</div>
   <div>Password: {details.password}</div>
</div>

要在页面之间共享数据，如果它是一个简单的用例，您可以使用useContext挂钩，或者您也可以使用Redux 、 Recoil等第三方库

Answer 2

显示你可以做的结果

> <span>{details.id}</span>
> <span>{details.fname}</span>
> <span>{details.lname}</span>
> <span>{details.email}</span>

在 span 或 div 内（随你喜欢）并将数据发送到另一个页面，你有 2 种方法：你可以使用 Redux 工具包： https ://redux-toolkit.js.org/ => 然后你可以显示你想要的信息或者使用带有参数的反应导航，例如：

> const handleSelect = (fname: string) => {
    navigate('/dashboard', {
      state: {
        fname: details.fname,
      }
    });
  };

然后你可以在另一个页面中得到它：

> props.location.state.fname in the dashboard page

如果您需要更多帮助或解释，请告诉我