我正在从ExpressJS API获取数据。
数据返回一个Object，其中包含两个键为key1和key2的对象。这些对象包含对象数组作为它们的值。如果我通过执行{JSON.stringify(data["key1"])}输出HTML中的数组，我会得到所有显示为字符串化数组的数据。当我试图迭代数据时，它显示了一个TypeError：
未捕获的类型错误：data.key1未定义
import React, { useEffect, useState } from "react";
export default function Home() {
const [data, setData] = useState([]);
const fetchData = () => {
return fetch("http://localhost:1337/").then((response) => response.json()).then((data) => setData(data));
}
useEffect(() => {
fetchData();
}, []);
return (
<div class="h-screen">
<div class="container mx-auto py-10 h-full text-white">
{JSON.stringify(data["key1"])}
{JSON.stringify(data["key2"])}
{data["key1"].forEach(function(item, index) {
return <div>{item}</div>
})}
</div>
</div>
);
}
2条答案
按热度按时间dced5bon1#
这里的问题是数据[“key1”]未定义。要解决这个问题，您需要在尝试访问它之前确保数据可用。您可以在尝试访问它之前检查数据是否可用来实现这一点。
taor4pac2#
这里，您将data的初始值设置为[]，因此没有定义任何key1，key2键。
最初，当组件呈现时
value of data is [] so you get an undefined error for key1 and key2.可以通过添加数据校验来解决此问题
这会解决你的问题。