javascript - 如何使用 URL 从 API 中获取特定数据

Question

这可能是一个简单的修复，但我无法看到解决方案。我花费了太多时间的项目终于开始结束了，但是我已经接近尾声了，我正在使用的 API 遇到了问题。

我希望每当我在 HeroDetail 中使用我的比赛时，我都能够使用该 ID 来找到我想要在您点击它时显示的英雄的数据。我的其他组件完全按照我认为的方式工作。他们将我引导至我的 HeroDetail 页面，其中包含我点击的英雄特定的 ID。

我遇到的问题是，使用这个 API，我不知道如何使用该 ID 来提取该特定 ID 的 HeroStats。

我以为我可以在网址末尾添加一些参数，例如 ?_id=${} 但没有成功。 API URL 为https://docs.opendota.com/#section/Introduction如果你也想读一点相关内容。我找不到任何可以帮助我的东西。

import React, {useState, useEffect} from "react";
import "./App.css";


function HeroDetail({match}) {

    useEffect(() => {
        fetchHero();
        console.log(match)
    },[]);

    const [item, setItem] = useState([]);

    const fetchHero = async () => {
        const fetchHero = await fetch(`https://api.opendota.com/api/heroStats}`);
        const item = await fetchHero.json();
        setItem(item);
        console.log(item)
    };
    return(
        <div>
           <h1>{item.id} </h1>
        </div>
    );
}

export default HeroDetail;

Answer 1

我拼凑了一个小型 CodeSandBox，其中包含我在 OP 评论中讨论的内容的工作示例。

https://codesandbox.io/s/silent-leftpad-cbjb3?fontsize=14&hidenavigation=1&theme=dark