时间戳

首页 > 解决方案 > Axios 在 buttonClick 上发布，稍后在同一页面上呈现此数据

reactjs - Axios 在 buttonClick 上发布，稍后在同一页面上呈现此数据

问题描述

我正在尝试制作一个可以对一本书进行评分的页面（现在只需单击按钮）。

const ratingHandler = () => {
    axios.post(`http://localhost:5000/api/book/${props.id}/rate`, { score: 5 });
  };


 <button onClick={ratingHandler}>Rate</button>

此代码运行良好，我可以在我的数据库中确定推送新评级。但后来，在同一页面上，我想呈现这些数据。为此，我正在使用：

<p>
   Rate: {about.rating_count} / {about.rating_sum}
</p>

当然，我再次获取数据：

 const [about, aboutWhat] = useState([]);
  useEffect(() => {
    axios
      .get(`http://localhost:5000/api/book/${props.id}`)
      .then((response) => aboutWhat(response.data));
  });

评分计数 = 您按下按钮的次数。评级总和 = 总和。这两个工作正常。但我无法使用上面的代码呈现这个速率。任何人都知道如何呈现这些数据？

import Card from "../ui/Card";
import classes from "./MeetupItem.module.css";
import { Link } from "react-router-dom";
import { useEffect, useState } from "react";
const axios = require("axios");
const HighlightedQuote = (props) => {
  const [about, aboutWhat] = useState([]);
  useEffect(() => {
    axios
      .get(`http://localhost:5000/api/book/${props.id}`)
      .then((response) => aboutWhat(response.data));
  });
  const removeHanlder = () => {
    fetch(`http://localhost:5000/api/book/${props.id}`, {
      method: "DELETE",
    });
  };
  const ratingHandler = () => {
    axios.post(`http://localhost:5000/api/book/${props.id}/rate`, { score: 5 });
  };
  return (
    <div className={classes.item}>
      <Card>
        <div className={classes.image}>
          <img src={props.image_url} alt={props.title} />
        </div>
        <div className={classes.content}>
          <p>
            Rate: {about.rating_count} / {about.rating_sum}
          </p>
          <button onClick={ratingHandler}>Rate</button>
        </div>
        <button onClick={removeHanlder}>Delete</button>
        <Link to={`/edit-book/${props.id}`}>
          <button>Edit</button>
        </Link>
      </Card>
    </div>
  );
};
export default HighlightedQuote;

标签： reactjsaxios

解决方案

您可以创建一个单独的函数来获取书籍数据，然后在需要时调用它。

说明：

  1. 创建getBookData方法
  2. useEffect在里面和里面调用它ratingHandler

解决方案：

 const [about, aboutWhat] = useState({});
  useEffect(() => {
    getBookData();
  }, []);

  const getBookData = () => {
   axios
      .get(`http://localhost:5000/api/book/${props.id}`)
      .then((response) => aboutWhat({...response.data}));
  }

 const ratingHandler = async () => {
    await axios.post(`http://localhost:5000/api/book/${props.id}/rate`, { score: 5 });
   getBookData();
  };

推荐阅读