TypeError: Cannot read property 'map' of undefined on tsx file

问题

ActivityListItemAttendees

interface IProps {
    attendees: IAttendee[]
}

export const ActivityListItemAttendees: React.FC<IProps> = ({attendees}) => {
    return (
        <List horizontal>
            {attendees.map(attendee => (    
                <List.Item key={attendee.username}>
                    <h1>{attendee.displayName}</h1>
                </List.Item>
            ))}
        </List>
    );
}

ActivityListItem

const ActivityListItem: React.FC<{activity: IActivity}> = ({activity}) => {

    return (
        <Segment.Group>
            <Segment>
                <Item.Group>
                    <Item>
                        <Item.Image size='tiny' circular src='/items/user.png' />
                        <Item.Content>
                            <Item.Header as='a'>{activity.title}</Item.Header>
                            <Item.Meta>{format(activity.date, 'eeee do MMMM')}</Item.Meta>
                            <Item.Description>
                                Hosted By Bob
                            </Item.Description>
                        </Item.Content>
                    </Item>
                </Item.Group>
                </Segment>
                <Segment>
                    <Icon name='clock' /> {format(activity.date, 'h:mm a')}
                    <Icon name='marker' /> {activity.venue}, {activity.city}
                </Segment>
                <Segment secondary>
                    <ActivityListItemAttendees attendees = {activity.attendees} />
                </Segment>
                <Segment clearing>
                    <span>{activity.description}</span>
                    <Button
                        as={Link} to={`/activities/${activity.id}`}
                        floated='right'
                        content='View'
                        color='black' />
                </Segment>
        </Segment.Group>
    )
}

export default ActivityListItem

Display Error Like these on Browser

I can't understand why Attendees can't read on browser? I added Interface on activity file. then I use it other's file as i'm done other's components Please anyone help me out.

Their is Activity file how i declare. This file use in Create Activity, And Now On View Attendees

export interface IActivity {
    id: string;
    title: string;
    description: string;
    category: string;
    date: Date;
    city: string;
    venue: string;
    attendees: IAttendee[]
}

export interface IAttendee {
    username: string;
    displayName: string;
    image: string;
    isHost: boolean;
}

回答1:

First thing to check at same errors (not necessary though if you are 100% sure about the data):

export const ActivityListItemAttendees: React.FC<IProps> = ({attendees}) => {

console.log('What does actually attendees have?', attendees);

There are a lot of occasions where properties are at first undefined and after the second render they get their values. In such cases, you need to check if they exist, and then use map in order to prevent these errors.

return (
    <List horizontal>
        {attendees && attendees.map(attendee => ( 

You can also use a loader component/loader text if this is not loaded yet.

来源：https://stackoverflow.com/questions/62851292/typeerror-cannot-read-property-map-of-undefined-on-tsx-file