TypeError:无法读取tsx文件上未定义的属性"map" [英] TypeError: Cannot read property 'map' of undefined on tsx file

问题描述

ActivityListItemAttendees

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

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

在浏览器上显示此类错误

我不明白为什么与会者无法在浏览器上阅读?我在活动文件上添加了接口.然后我用别人的文件，因为我完成了别人的组件请任何人帮我.

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

推荐答案

要检查相同错误的第一件事(虽然如果您对数据有100％的肯定，则没有必要):

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

在很多情况下，属性首先是未定义的，而在第二次渲染之后，它们会获得其值.在这种情况下，您需要检查它们是否存在，然后使用 map 来防止这些错误.

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.

这篇关于TypeError:无法读取tsx文件上未定义的属性"map"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！