Javascript 在React中迭代JSON对象

我目前正在努力迭代从第三方API获取的JSON对象。您可能会看到，以前没有真正处理过获取API

---

下面是我正在获取的JSON文件：

---

为了获取数据，我使用了一个useFetch脚本，如下所示：

//useFetch.js
从“react”导入{useState，useffect}；
从“同构取消蚀刻”导入提取；
函数useFetch（url）{
const[data，setData]=useState（[]）；
const[loading，setLoading]=useState（true）；
异步函数fetchUrl（）{
const res=等待获取（url）；
const json=await res.json（）；
setData（json）；
设置加载（假）；
}
useffect（（）=>{
fetchUrl（）；
}, []);
返回[数据，加载]；
}
导出{useFetch}；

---

我稍后尝试导出的只是每个角色/冠军的名称（他本身就是一个对象，包括名称、描述等）

---

//App.js
从“react”导入{useState，useEffect}；
从“./components/useFetch”导入{useFetch}；
常量应用=（）=>{
const[data，loading]=useFetch(
"https://ddragon.leagueoflegends.com/cdn/9.3.1/data/en_US/champion.json"
);
useffect（（）=>{
console.log（数据）
})
返回(

{Object.keys（data.data）.map（（项，i）=>(
//每个字符都有一个ID，我想稍后在这里传递。输出只是一个伪rn。
{data.data}


))}

)
}
导出默认应用程序；

不幸的是，我在尝试转换JSON对象

data.data

时遇到了一个错误，上面写着：

TypeError:无法将未定义或null转换为对象

它指向我在JSX中的迭代

我尝试的是针对这些空规则，并给它们一个字符串，结果如下

if（（typeof Object==null）| |（typeof Object==undefined））{
返回“-”
}

或

if（（item==null）| |（item==undefined））{
返回“-”
}

但这显然没有帮助

---

我非常感谢您提供的任何提示/优化。

我不太愿意对钩子做出反应，但是您将数据设置为

[]

所以

数据。在实际获取数据之前，数据将是未定义的

如果您设置
const[data，setData]=useState（{data:[]），它会工作吗在useFetch中？
可能的重复我已经看过了，但是我似乎没有正确地实现它可能的修复。是
数据。数据
未定义还是空？我想这实际上修复了它。我尝试将其设置为
useState（{}）
之前，忘记了数据属性，并遇到了相同的错误。谢谢。