我正在學習MERN，我創建了一個簡單的網站，您可以在該網站上登錄和注冊。
登錄和注冊功能運行良好，但我的關于頁面有一些錯誤。
如果您未登錄（基于 Cookies 部分中的令牌）并且您單擊關于它會將您重定向到登錄頁面，那么關于頁面的問題很簡單，如果您已登錄，它將顯示您的詳細資訊。
當我從 MongoDB 獲取所有資料時，我將其存盤在一個變數data中。我已經將所有資料存盤data在一個useState();名為userData.
當 Iconsole.log(userData);向我顯示所有好的細節時，當 I 時console.log(userData.name)，它顯示的用戶名也很好。
但是當我在 中給出相同userData.name的值時h5，它會顯示一個錯誤。
我給了這樣的：<h5>{userData.name}</h5>。
我完整的 About.js 代碼：
import React from 'react';
import agrim from "../images/agrim.jpeg";
import { useNavigate } from "react-router-dom";
const About = () => {
const navigate = useNavigate();
const [userData, setUserData] = React.useState();
const callAboutPage = async () => {
try {
const res = await fetch("/about", {
method: "GET",
headers: {
Accept: "application/json",
"Content-Type": "application/json"
},
credentials: "include"
});
const data = await res.json();
setUserData(data);
if(!res.status === 200) {
const error = new Error(`An Error Occurred: ${res.error}`);
console.log(error);
throw error;
}
} catch (error) {
console.log(`An Error Occurred: ${error.message}`);
navigate("/login");
}
}
React.useEffect(() => {
callAboutPage();
}, [callAboutPage]);
return (
<>
<div className="container emp-profile mt-4">
<form method="GET">
<div className="row">
<div className="col-md-4">
<div className="profile-img">
<img src={agrim} alt="Agrim Singh" />
</div>
</div>
<div className="col-md-6 profile-head">
<h5 onClick={() => console.log(userData.name)}>{userData.name}</h5>
<h6>Web Developer, Student</h6>
<p>
RANKINGS : <span>1/10</span>
</p>
<ul className="nav nav-tabs" role="tablist">
<li className="nav-item">
<a
href="#home"
className="nav-link-active mr-4"
id="home-tab"
data-toggle="tab"
role="tab"
>
About
</a>
</li>
<li className="nav-item">
<a
href="#profile"
className="nav-link-active"
id="profile-tab"
data-toggle="tab"
role="tab"
>
Timeline
</a>
</li>
</ul>
</div>
<div className="col-md-2">
<input type="submit" className="profile-edit-btn" name="btnAddMore" value="Edit Profile" />
</div>
</div>
<div className="row">
<div className="col-md-4">
<div className="profile-work">
<p>WORK LINK</p>
<a href="https://www.youtube.com/channel/UCdfS-7bgMHA_x-0u7pxjZng" target="_youtube">Youtube</a> <br />
<a href="https://instagram.com/ff_player.agrim" target="_instagram">Instagram</a> <br />
<a href="https://gsonline.vercel.app/" target="_gsonline">GSOnine</a> <br />
<a href="https://agrimpay-paymentapp.web.app/" target="_agrimpay">Agrim Pay</a> <br />
<a href="https://mernagrimatechnical.herokuapp.com/" target="_agrimpay">Agrim Technical</a> <br />
<a href="https://www.github.com/AgrimSingh421" target="_github">Github</a>
</div>
</div>
<div className="col-md-8 pl-5 about-info">
<div className="tab-content profile-tab" id="myTabContent">
<div className="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<div className="row">
<div className="col-md-6">
<label>User ID</label>
</div>
<div className="col-md-6">
<p>45899963254778996541</p>
</div>
</div>
<div className="row mt-3">
<div className="col-md-6">
<label>Name</label>
</div>
<div className="col-md-6">
<p>{userData.name}</p>
</div>
</div>
<div className="row mt-3">
<div className="col-md-6">
<label>Email</label>
</div>
<div className="col-md-6">
<p>[email protected]</p>
</div>
</div>
<div className="row mt-3">
<div className="col-md-6">
<label>Phone</label>
</div>
<div className="col-md-6">
<p>8996325410</p>
</div>
</div>
<div className="row mt-3">
<div className="col-md-6">
<label>Profession</label>
</div>
<div className="col-md-6">
<p>Web Developer, Student</p>
</div>
</div>
</div>
<div className="tab-pane fade show active" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<div className="row">
<div className="col-md-6">
<label>Experience</label>
</div>
<div className="col-md-6">
<p>Intermediate</p>
</div>
</div>
<div className="row mt-3">
<div className="col-md-6">
<label>Hourly Rate</label>
</div>
<div className="col-md-6">
<p>?599/hr</p>
</div>
</div>
<div className="row mt-3">
<div className="col-md-6">
<label>Total Projects</label>
</div>
<div className="col-md-6">
<p>24</p>
</div>
</div>
<div className="row mt-3">
<div className="col-md-6">
<label>Availibility</label>
</div>
<div className="col-md-6">
<p>10 Months</p>
</div>
</div>
<div className="row mt-3">
<div className="col-md-6">
<label>English Level</label>
</div>
<div className="col-md-6">
<p>Intermediate</p>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</>
);
};
export default About;
我沒有在其他領域給予，因為如果userData.name會很好，其他人也會很好。
我完整的 authenticate.js 代碼：
//_ Requiring Modules
const jwt = require("jsonwebtoken");
const User = require("../model/userSchema");
//_ Making authenticate function to use in auth.js
const authenticate = async (req, res, next) => {
try {
const token = req.cookies.jwtoken; //_ Getting Token from cookies
const verifyToken = jwt.verify(token, process.env.SECRET_KEY); //_ Verifiying token and storing it into a variable
const rootUser = await User.findOne({ _id: verifyToken._id, "tokens.token": token }); //_ If the token in the cookies section from the browser is matched from the token from the database, it means the user is available and we can show him his about page
if(!rootUser) { throw new Error("User not found!") }
//_ Getting all data
req.token = token;
req.rootUser = rootUser;
req.userID = rootUser._id;
next(); //_ Calling next() to do other things. Im simple words: AAGE BADHO AAGE!
} catch (error) {
res.status(401).send("Unauthorized: No token provided");
console.log(`An Error Occurred: ${error.message}`);
}
}
//_ Exporting authenticate function
module.exports = authenticate;
我有一個 auth.js 檔案，我在其中呼叫頁面
router.get("/about", authenticate, (req, res) => {
res.send(req.rootUser);
});
我已經像這樣匯入了路由器：
const express = require("express");
const router = express.Router();
我已經像這樣匯出了路由器：module.exports = router;
任何幫助，將不勝感激...
uj5u.com熱心網友回復：
您必須更改 useState 型別：
const [userData, setUserData] = useState({}):
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/495730.html
上一篇：填充貓鼬模型未回傳預期結果
下一篇：Node.js/MongoDB-TypeError：無法解構'req.body'的屬性'title'，因為它未定義