如何接收 Api 数据 url 发生变化？

Question

我将从我点击的 post 的 ID 中获取一个 api，并在 react-hooks 中创建一个模态我希望 url 的最后一部分包含 id。

让url = https://www.thecocktaildb.com/api/json/v1/1/lookup.php?i=${id} <- 这部分!!

我知道如何使用 Params 获取 id。但是不应该将其添加到 Router 我不是在创建新页面，而是在创建模态。当我单击主页上的 post 时，模式出现。这和Route功能到新地址不是不一样吗？

如何根据点击的id得到API？

import React, { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import axios from "axios";

const { id } = useParams();
const [data, setData] = useState([]);

useEffect(() => {
    let url = `https://www.thecocktaildb.com/api/json/v1/1/lookup.php?i=${id}`;
    axios
      .get(url)
      .then((res) => {
        setData(res.data.drinks);
      })
      .catch((error) => {
        console.log(error);
      });
    console.log(data);
  }, [id]);

Answer 1

您要查看的是 route/path/url 参数。虽然我不是 React 专家，但快速 Google 搜索确实可以解决这个问题。

一些链接可能会为您提供所需的答案：a react router guide, a medium article, a code example

如果问题是您需要根据您点击的位置向 API 发送请求，那么您最好将您点击的模式与它所属的内容的 ID 相关联。然后当你点击它时，你可以使用关联的 id 从后端检索那个东西的完整信息。

如何接收 Api 数据 url 发生变化？

How can I receive Api data with url that changes?

api

modal-dialog

reactjs

react-hooks