如何接收带有更改的 url 的 Api 数据？答案

【问题标题】：How can I receive Api data with url that changes?如何接收带有更改的 url 的 Api 数据？
【发布时间】：2021-04-10 02:57:43
【问题描述】：

我将从我点击的帖子的 id 中获取一个 api，并在 react-hooks 中创建一个模式我希望 url 的最后一部分有 id。

让 url = https://www.thecocktaildb.com/api/json/v1/1/lookup.php?i=${id}

我知道如何使用 Params 带上 id。但是不应该将其添加到路由器中吗？我不是在创建新页面，而是在创建模式。当我单击主页上的帖子时，会出现模态。这和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]);

【问题讨论】：

标签： reactjs api react-hooks modal-dialog

【解决方案1】：

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

一些链接可能会为您提供您正在寻找的答案：a react router guide、a medium article、a code example

如果问题是您需要根据您点击的位置向 API 发送请求，那么您最好将您点击的模态与其所属事物的 id 关联起来。然后，当您单击它时，您可以使用关联的 id 从后端检索该事物的完整信息。

【讨论】：