尝试使用 reactjs hook 向 API 端点发出请求

Question

端点

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, please try again later.",
        });
      } else {
        console.log(data);
        res.status(200).json({
          message: "bio found",
          data,
        });
      }
    });
  };
  

前端

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} 失败。

Answer 1

为了让您看到您的 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} 不起作用。