“TypeError：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>
  );
}