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

这可能是一个简单的解决方案，但我无法看到解决方案。我花了太多时间的项目终于要结束了，但是我快结束了，我的API遇到了问题

我希望每当我在HeroDetail中使用我的匹配时，我都能够使用该ID找到英雄的who数据，我希望在您单击该数据时显示该数据。我的其他组件正是按照我认为应该的方式工作的。他们将我发送到我的HeroDetail页面，页面上有一个特定于我点击的英雄的ID

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

我想我可能可以在url的末尾添加一些参数，比如？\u id=${}，但这没有成功。如果您还想阅读一点API URL，则可以使用它。我找不到任何能帮助我的东西

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;

import React，{useState，useffect}来自“React”；
导入“/App.css”；
函数详细信息（{match}）{
useffect（（）=>{
fetchHero（）；
console.log（匹配）
},[]);
const[item，setItem]=useState（[]）；
const fetchHero=async（）=>{
const fetchHero=等待获取(`https://api.opendota.com/api/heroStats}`);
const item=wait fetchHero.json（）；
设置项目（项目）；
console.log（项目）
};
返回(
{item.id}
);
}
导出默认细节；

Opendota不提供按id检索HeroStat的API。但您只能获取一次HeroStats。将它们存储到您的应用商店中（如果您正在使用Redux）。使用

find

的

filter

获得带有您id的确切heroStat。此外，您可以使用创建记忆选择器。

作为API文档，我们可以看到它将提供一个对象数组

[ { “id”：0， “名称”：“字符串”， “本地化名称”：“字符串”， “img”：“字符串”， “图标”：“字符串”， “亲欧赢”：0， “pro_pick”：0， “英雄id”：0， “亲潘”：0， “1_pick”：0， “1_赢”：0， “2_拾取”：0， “2_赢”：0， “3_拾取”：0， “三赢”：0， “4_拾取”：0， “四赢”：0， “5_拾取”：0， “五赢”：0， “6_拾取”：0， “六胜”：0， “7_拾取”：0， “七胜”：0 } ]

所以，如果你想访问id，那么在你的情况下， 项[0]。id将起作用，或者您可以使用“查找”

const found=item.find（element=>element.id=='which id'）

---

console.log（找到）

我创建了一个小的代码沙盒，其中有一个我在OP评论中提到的工作示例

---

你能试试

const-hero=item.find（h=>h.id===/*你想要的英雄的id*/）

const-hero=item.find（h=>h.id====match.params.id）给我未定义在你从

fetch（）获取的数据中有一个id为
match.params.id
的英雄

？如果您已从生产代码中复制粘贴了上述代码片段，那么可能值得注意的是，在您的fetch url中有一个尾随“}”，Tim的方法应该为您提供正确的hero。能否确认

match.params.id

的类型确实是一个数字而不是一个字符串？

const-hergod=match.params.id；const hero=item.find（element=>element.id==herod）；console.log（英雄）

仍然给我未定义的id

match.params.id

undefined？不，我有另一个组件映射所有英雄，关键是他们的id，一旦我点击我想要选择的英雄，它会将该id添加到url，这就是match.params.id返回的内容。因此，在本例中，我选择了Bloodseek，如果您想检查所有内容，则返回4。没有package.json？