问题描述
端点
const mongoose = require("mongoose");
const CreateBio = mongoose.model("bios");
// exports.baseRoute = async (req,res) => {
// res.send("Server Running");
// };
exports.createBio = async (req,res) => {
console.log(req.body);
let userBio = new CreateBio({
userBio: req.body.userBio
});
console.log('userBio:',userBio);
await userBio.save((err,data) => {
if (err) {
// if there is an error send the following response
res.status(500).json({
message: "Something went wrong,please try again later.",});
} else {
// if success send the following response
res.status(200).json({
message: "Bio Created",data,});
}
});
};
exports.displayBio = async (req,res) => {
// get id from URL by using req.params
let userBioID = req.params.id;
console.log(userBioID);
// we use mongodb's findById() functionality here
await CreateBio.findById({ _id: userBioID },(err,data) => {
if (err) {
console.log(err)
res.status(500).json({
message: "Something went wrong,});
} else {
console.log(data);
res.status(200).json({
message: "bio found",});
}
});
};
前端
import React,{ useState,useEffect } from "react";
import { useHistory } from "react-router-dom";
import { isExpired,decodetoken } from "react-jwt";
import Form from "react-bootstrap/Form";
import Button from "react-bootstrap/Button";
import Container from "react-bootstrap/Container";
import Card from "react-bootstrap/Card";
import "./tests/home-test.css";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import Navi from "../Navigation/nav";
import Image from "react-bootstrap/Image";
import axios from "axios";
import Nav from "react-bootstrap/Nav";
//import { displayBio } from './displayBio';
// import "./login.css";
const Home = () => {
//const [someProperty,setSomeProperty] = useState([]);
const [userBio,setBio] = useState("")
const history = useHistory();
const loadBio = async () => {
try{
let res = await axios.get('http://localhost:5000/displaybio/:id')
setBio(res.data.data.userBio)
console.log(res.data.data.userBio)
} catch (err){
console.log(err)
}
}
useEffect(() => {
// console.log("use effect working!");
if (!window.localStorage.getItem("token")) {
//redirect to login
console.log("redirect to login");
history.push("/");
}
if (window.localStorage.getItem("token")) {
const isMyTokenExpired = isExpired(window.localStorage.getItem("token"));
console.log(isMyTokenExpired);
if (isMyTokenExpired) {
console.log("redirect to login");
history.push("/");
}
const myDecodedToken = decodetoken(window.localStorage.getItem("token"));
console.log(myDecodedToken);
}
// fetch('http://localhost:5000/displayBio/:id',{
// method: "GET"
// })
// .then(res => res.json())
// .then(response => { setBio(response.item)
// })
loadBio()
},[]);
return (
<div className="Home">
<Container className="homeContainer shadow mt-2">
<Row>
<Col className="d-flex align-items-center">
<span>Home (You are logged in)</span>
</Col>
<Col className="">
<div className="d-flex align-items-center justify-content-end">
<Button
className="logoutBtn mb-2 mt-2"
onClick={(e) => {
window.localStorage.removeItem("token");
this.props.history.push("/");
}}
>
logout
</Button>
</div>
</Col>
</Row>
<Form>
<Card className="profileCard">
<Card.Body>
<Card.Title className="text-center">
<div>
<Navi />
</div>
<h1>
Welcome Back <span className="text-success">Username</span>
</h1>
</Card.Title>
<Container>
<Row>
<Col className="d-flex justify-content-center col-12">
<div className="profilepic text-center">
Add a Profile Picture here!
</div>
</Col>
<Col className="mt-n5">
<div className="col-12 text-center">
<Card.Text
className="cardText text-center col-lg-10"
value={userBio}
//onChange={setBio}
></Card.Text>
<div className="mt-3">
<Button
className="shareVsBtn"
variant="success"
type="submit"
href="/sharewall"
>
Shared Verse
</Button>
</div>
<div className="mt-3">
<Button
className="postSubBtn mb-3"
variant="success"
type="submit"
href="/postverse"
>
Post a Verse
</Button>
</div>
</div>
</Col>
</Row>
</Container>
</Card.Body>
</Card>
</Form>
</Container>
</div>
);
}
export default Home;
每次尝试发送请求时,我都会收到 500 错误。500 我似乎无法将其发送到 console.log 前端的任何信息。我不确定我是否只是正确地格式化了我的钩子。我可以使用邮递员在后端得到我的回复。但是我来自前端的 get 请求没有通过。声明我在路径 _id 为我的模型 bios 投射 {_id :id} 失败。
解决方法
为了让您看到您的 userBio,您需要在 Card.Text 选择器中放置把手(我在此示例中省略了 className)。这将允许您在前端查看数据。这是通过从 mongo 获取 id 并将其粘贴到 http 地址中的结果,即:http://localhost:5000/displaybio/123456789
。
<Card.Text value={userBio.id}>{userBio}</Card.Text>
在您的 loadBio 中,您需要 console.log(res);
找到代码在数据对象中的位置。在这种情况下:setBio(res.data.data.userBio)
。这是查看显示数据的答案,Cody 仍然需要一个关于如何通过 id 动态抓取数据的答案。 displaybio/${id}
不起作用。