TypeError: невозможно прочитать свойство 'map' undefined в файле tsx - PullRequest
Новая
       45

TypeError: невозможно прочитать свойство 'map' undefined в файле tsx

0 голосов
/ 11 июля 2020

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

Отображение таких ошибок в браузере

Я не могу понять, почему участники могут ' читаешь в браузере? Я добавил интерфейс в файл активности. Затем я использую его другой файл, как и другие компоненты. Пожалуйста, помогите мне.

Это файл Activity, как я объявляю. Этот файл используется в 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 Ответ

0 голосов
/ 11 июля 2020

Первое, что нужно проверить при тех же ошибках (не обязательно, если вы на 100% уверены в данных): 

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

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

Во многих случаях свойства сначала не определены, а после второго render они получают свои ценности. В таких случаях вам необходимо проверить, существуют ли они, а затем использовать map, чтобы предотвратить эти ошибки. 

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

Вы также можете использовать компонент загрузчика / текст загрузчика, если он еще не загружен .

...