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

Question

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>
    );
}

Activity列表项

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

我不明白为什么与会者不能在浏览器上阅读？我在 activity 文件上添加了接口。然后我使用其他人的文件，因为我完成了其他人的组件请任何人帮助我。

他们是Activity我申报的文件。此文件用于创建 Activity，现在用于查看与会者

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;
}

Answer 1

首先要检查相同的错误（如果您对数据有 100% 的把握，则没有必要）：

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

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

在很多情况下，属性最初是未定义的，但在第二次渲染后它们获得了它们的值。在这种情况下，您需要检查它们是否存在，然后使用 map 以防止这些错误。

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

如果文本尚未加载，您也可以使用加载器 component/loader。

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

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

typescript

reactjs

asp.net-core-webapi

react-tsx