Блог

У меня есть этот массив фиктивных данных:

 const DUMMY_DATA = [
{
    id: '1',
    subject: 'SUBJECT1',
    creator: 'CREATOR1',
    max_participants: '34',
    location: 'location',
    date: 'date',
},
{
    id: '2',
    subject: 'SUBJECT1',
    creator: 'CREATOR1',
    max_participants: '34',
    location: 'location',
    date: 'date',
},
{
    id: '3',
    subject: 'SUBJECT1',
    creator: 'CREATOR1',
    max_participants: '34',
    location: 'location',
    date: 'date',
},
]
  

У меня есть компонент, который принимает объект и отображает его.

Это то, что у меня есть сейчас:

 const Item = ({ meeting }) => (
    <TouchableOpacity style={styles.cardButton} onPress={this._showMeetingDetails}>
        <MeetingCard meetingModel={meeting} />
    </TouchableOpacity>
);

const HomeScreen = ({ navigation }) => {
    _showMeetingDetails = () => {
        navigation.navigate('MeetingDetails', { meeting: meeting });
    }


    const renderItem = ({ meeting }) => (
        <Item meeting={meeting} />
    );

    return (
        <>
            <SafeAreaView style={styles.homeContainer}>
                <View>
                    <View style={styles.headerContainer}>
                        <View style={{ display: "flex", flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}>
                            <Text style={styles.title}>Groups</Text>
                            <Avatar
                                rounded
                                source={{
                                    uri:
                                        'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
                                }}
                            />
                        </View>
                        <Text style={styles.subtitle}>Find people to learn with</Text>
                    </View>
                    <OptionChooser />


                  <FlatList
                      data={DUMMY_DATA}
                      renderItem={renderItem}
                      keyExtractor={item => item.id}
                  />


                </View>
                <FloatingButton onPress={this._showAddMeeting} />
            </SafeAreaView>
        </>
    )
}
  

Итак, MeetingCard это компонент, который берет объект и отображает его, но когда я пытаюсь использовать его в MeetingCard, я получаю сообщение об ошибке:

  TypeError: undefined is not an object (evaluating 'props.meetingModel.subject')
  

Я хочу отобразить это в FlatList, я перепробовал все найденные решения, но я не мог понять, почему это не сработает для меня. Я понимаю, что я передаю undefined как meetingModel, но я не могу понять, в чем причина. Я попробовал несколько решений для отображения массива объектов в FlatList, но у меня это не сработало — я действительно не знаю, что я делаю не так (я новичок в React Native).

Это мой компонент MeetingCard на случай, если это необходимо (я не думаю, что это необходимо, так как проблема в том, что я передаю ему undefined):

 const MeetingCard = (props) => {
return (
    <View style={styles.card}>
        <View>
            <Text style={styles.subject}>
                {props.meetingModel.subject}
            </Text>
            <Text style={styles.creator}>
                Created By: {props.meetingModel.creator}
            </Text>
        </View>
        <View>
            <View style={styles.separator}></View>
            <View style={styles.infoRow}>
                <Icon name="time-outline" size={24} color="#000" />
                <Text style={{ marginVertical: 4, marginHorizontal: 8 }}>Scheduled to: {props.meetingModel.date}</Text>
            </View>
            <View style={styles.infoRow}>
                <Icon name="people-outline" size={24} color="#000" />
                <Text style={{ marginVertical: 4, marginHorizontal: 8 }}>Maximum of: {props.meetingModel.max_participants} people</Text>
            </View>
        </View>
    </View>
)
}
  

renderItem Функция a FlatList принимает объект с именами ключей item , index и separators . Поскольку в meeting нет renderItem ключа, он не определен. Я думаю, если вы просто переключите его с

 const renderItem = ({ meeting }) => (
    <Item meeting={meeting} />
);
  

Для

 const renderItem = ({ item: meeting }) => (
    <Item meeting={meeting} />
);
  

это должно сработать!

Удачи!