"类型错误：events.map 不是一个函数"我在创建新事件时收到此错误

Question

events.jsx

export default function Event({eventForm,setEventForm}) {
const[data,setData]=useState(sampleData);
function HandleCreateEvent(event) {
setData(...data,event)
}
return(
<Fragment>
<Grid>
<Grid.Column width={10}>
<EventList events={data}/>
</Grid.Column>
<Grid.Column width={6}>
{
eventForm &&
<EventForm setEventForm={setEventForm} setData={setData} createEvent={HandleCreateEvent}/>
};

</Grid.Column>
</Grid>
</Fragment>);
}

eventlist.jsx

export default function EventList({events}){
return(
<Fragment>

{events.map(event=>
<EventListItem key={event.id} event={event}/>
)}
</Fragment>
);    
}

EventForm.jsx

export default function EventForm({setEventForm ,setData, createEvent})
{
const initialValues=
{
title:'',
company:'',
description:'',
city:'',
venue:'',
date:''
}
const[values,setValues]=useState(initialValues);
function handleFormSubmit()
{
createEvent({...values,id:cuid(), hostedBy:"bob", attendees:[], hostPhotoURL:"/assets/default.png"});
setEventForm(false);
}
function handleInputSubmit(e)
{
const{name,value}=e.target
setValues({...values,[name]:value});   
}

从eventform.jsx，我以JSON格式传递数据，并在event.jsx中接受它，然后在Eventlist.jsx中恢复它，但在Eventlist.jsx中显示错误。我正在这个函数中创建事件。

Answer 1

工作应用程序：Codesandbox

import React, { Fragment, useState } from "react";
import { Grid } from "semantic-ui-react";
import EventForm from "./EventForm";
import EventList from "./EventList";
import { sampleData } from "./eventData";
export default function Event({ eventForm, setEventForm }) {
const [data, setData] = useState(sampleData);
function HandleCreateEvent(event) {
//set state like this 👇
setData([...data, event]);
}
return (
<Fragment>
<Grid>
<Grid.Column width={10}>
<EventList events={data} />
</Grid.Column>
<Grid.Column width={6}>
{eventForm && (
<EventForm
setEventForm={setEventForm}
createEvent={HandleCreateEvent}
/>
)}
;
</Grid.Column>
</Grid>
</Fragment>
);
}