时间戳

首页 > 解决方案 > 在 axios.post 之后属性保持未定义

reactjs - 在 axios.post 之后属性保持未定义

问题描述

我有一个简单的代码：

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

它在按钮点击时评价一本书。虽然我看到 Postgree 数据库中添加的值，但使用这个 console.log 我可以在浏览器中看到，该属性保持未定义。有谁知道为什么？

该组件的完整代码：

import classes from "./HighligtedBook.module.scss";
import { Link } from "react-router-dom";
const axios = require("axios");
const HighlightedBook = (props) => {
  const removeHanlder = () => {
    axios.delete(`http://localhost:5000/api/book/${props.id}`);
    alert("Książka usunięta");
  };
  const ratingHandler5 = () => {
    axios.post(`http://localhost:5000/api/book/${props.id}/rate`, { score: 5 });
  };
  const ratingHandler4 = () => {
    axios.post(`http://localhost:5000/api/book/${props.id}/rate`, { score: 4 });
  };
  const ratingHandler3 = () => {
    axios.post(`http://localhost:5000/api/book/${props.id}/rate`, { score: 3 });
  };
  const ratingHandler2 = () => {
    axios.post(`http://localhost:5000/api/book/${props.id}/rate`, { score: 2 });
  };
  const ratingHandler1 = () => {
    axios.post(`http://localhost:5000/api/book/${props.id}/rate`, {
      score: 1,
    });
    console.log(props);
  };
  return (
    <div className={classes.item}>
      <div className={classes.image}>
        <img src={props.image_url} alt={props.title} />
      </div>
      <div className={classes.content}>
        <h3 className={classes.title}> {props.title}</h3>
        <h4> {props.author}</h4>
        <h4> {props.release_date}</h4>
        <h4> {props.genre}</h4>
        <p className={classes.opis}>Opis: {props.description}</p>
        <div className={classes.actions}>
          <button onClick={ratingHandler5}>Oceń na 5</button>
          <button onClick={ratingHandler4}>Oceń na 4</button>
          <button onClick={ratingHandler3}>Oceń na 3</button>
          <button onClick={ratingHandler2}>Oceń na 2</button>
          <button onClick={ratingHandler1}>Oceń na 1 </button>
          <button onClick={removeHanlder}>Usuń</button>
          <Link to={`/edit-book/${props.id}`}>
            <button>Edytuj</button>
          </Link>
        </div>
      </div>
    </div>
  );
};
export default HighlightedBook;

标签： reactjsdatabaseapiaxios

解决方案

从你描述得很糟糕的情况来看。你的问题可能是这样的：

您的 API 运行良好。它只是做它的工作。你的前端也是如此。这是您编码的内容，无法达到您想要的目的。您需要在axiospost 函数中添加一个回调，以便在请求成功后从 Postgres 读取新分数。该回调将调用状态挂钩来更新客户端浏览器中显示的分数。除非您告诉前端，否则前端不会自行更新

推荐阅读