为什么我的组件被渲染一次，但在刷新失败

Question

我正在做小反应作业，

下面是我的组件代码。我的组件渲染了一次，但之后就失败了。我也会附上截图，有人能解释一下发生了什么吗?代码中是否有错误，或者是因为我正在使用的API中的某些速率限制?

import React from 'react'
const Menu = ({events}) => {
console.log(events);
return (
<div>
{events.map((event)=>{
return(  <div key={event.category}>
<h3>{event.category}</h3>
</div>)
})}
</div>
)
}
export default Menu

代码工作图像

相同代码出现错误

父组件代码

import React,{useState,useEffect} from 'react';
import './App.css';
import Menu from './components/Menu';
function App() {
const [isLoading,setISLoading] = useState(true);
const[events,setEvents] = useState()
const getEvents = async()=>{
const response = await fetch('https://allevents.s3.amazonaws.com/tests/categories.json');
const eventsData =await response.json()
setISLoading(false);
setEvents(eventsData);
}
useEffect(()=>getEvents(),[]);
return (
isLoading?<h1>Loading...</h1>:<Menu events = {events}/>

);
}
export default App;

Answer 1

可能是提供事件的Menu的父组件没有使用任何加载状态。因此，当组件挂载并开始进行ajax调用时，events是未定义的。你需要在这里加上一个条件，像这样:

import React from 'react'
const Menu = ({events}) => {
console.log(events);
return events ? (
<div>
{events.map((event)=>{
return(  <div key={event.category}>
<h3>{event.category}</h3>
</div>)
})}
</div>
) : null
}
export default Menu