我试图从本地JSON服务器显示数据,但我进入错误。
我知道fetch返回一个异步的promise,并且需要几毫秒才能成功获取数据,但我的问题是,我如何避免或忽略第一个空对象响应,并且只在获取数据时执行map,因为我得到“无法读取未定义的属性(阅读“map”)”
function App() {
const [data, setData] = useState({});
const [loaded, setLoaded] = useState(false);
useEffect(() => {
fetch("http://localhost:8000/data")
.then((response) => {
if (!response.ok) {
throw new Error("Data failed to fetch");
}
return response.json();
})
.then((data) => {
setData(data);
setLoaded(true);
});
}, []);
return (
<div className="App">
<Card data={data} loaded={loaded} />
</div>
);
}
const Card = ({ data, loaded }) => {
return (
<div>
{data.activeUsers.user432.map((user) => (
<h1 key={user.id}>{user.id}</h1>
))}
</div>
);
};
1条答案
按热度按时间8oomwypt1#
试试这个