reactjs - 反应增量喜欢一个 API 端点

问题描述

我试图为我页面上的每个食谱建立一个喜欢的系统。端点有效，我基本上传递了 id，当我提交时，它通过该配方之一增加喜欢的数量。我试图为它制作前端部分。基本上我正在构建一个自定义钩子

import { useState, useEffect } from "react";
import axios from "axios";

const useLikes = (id) => {
  const [like, setLike] = useState();

  useEffect(() => {
    (async (id) => {
      const response = await axios.post(`
                https://obscure-river-28733.herokuapp.com/recipe/like/${id}
                `);
      setLike(response.data);
    })(like);
  });
  console.log("like" + like);

  return like;
};

export default useLikes;

现在这是我有点坚持要做什么的部分。我像这样构建图标

import React from "react";
import { BsHeart } from "react-icons/bs";
import useLikes from "./useLikes";

const Likes = ({ id }) => {
  const likes = useLikes(id);

  return (
    <BsHeart
      likes={id}
      color="red"
      size={18}
      onClick={() => console.log(likes)}
    />
  );
};

export default Likes;

在我的地图内的应用程序组件上，我这样称呼它

                  <Likes likes={record.id} />

id 是未定义的，因此它不会使帖子变得不可行。有人可以帮我解决这个问题吗？

标签： reactjsnestjs

你的 Likes 组件应该这样定义：

const Likes = ({ likes: id }) => {

或在调用时更改道具名称

<Likes id={record.id}/>

Api 调用是异步的，所以它应该在异步函数中简单地完成


const useLikes = async (id) => {
  
  const response = await axios.post(`
                https://obscure-river-28733.herokuapp.com/recipe/like/${id}
                `);
  return response.data;
};

然后在 Likes 组件中，您可以像这样使用 useLikes 函数

const [likes, setLikes] = useState(0);
useLikes(id).then((res) => setLikes(res));

reactjs - 反应增量喜欢一个 API 端点

问题描述

解决方案

推荐阅读