时间戳

首页 > 解决方案 > 反应导航，路线数据正在抛出“未定义不是对象”

reactjs - 反应导航，路线数据正在抛出“未定义不是对象”

问题描述

尝试使用 react-navigation 路由将数据传递到应用程序的第二页，但项目数据似乎没有正确传输。React nav to 相当新，不会怀疑它是否简单。这是代码。

数据的发送：

<FlatList
                        data={posts}
                        renderItem={(item) =>
                            <TouchableOpacity onPress={(item) => navigation.navigate("DiscoverDetails", { item })} style={styles.card}>
                                {/*top row */}
                                <View style={{ flex: 1, flexDirection: 'row' }}>
                                    {/*this changes depending on the filter, make icon a var */}
                                    <View style={styles.cardIconBox}></View>
                                    {/* title and tag container */}
                                    <View style={styles.cardTitleContainer}>
                                        <Text style={styles.cardTitleStyle}>{item.item.title}</Text>
                                        <Text>{item.item.tags}</Text>

                                    </View>
                                </View>
                                {/*bottom row */}
                                <View style={{ flex: 1 }}>
                                    <View style={styles.cardHorDivide} />
                                    <View style={{ flexDirection: 'row' }}>
                                        {/*this is the horizontal divs on the bottom */}
                                        <View style={styles.cardBotChunk}>
                                            <Image style={styles.clock} source={require('../assets/clock.png')} />
                                            <Text style={styles.intStyle}>{item.item.length}</Text>
                                        </View>
                                        <View style={styles.vertDiv} />
                                        <View style={styles.cardBotChunk}>
                                            <Image style={styles.clock} source={require('../assets/user.png')} />
                                            <Text style={styles.intStyle}>344</Text>
                                        </View>
                                        <View style={styles.vertDiv} />
                                        <View style={styles.cardBotChunk}>
                                            <Image style={styles.clock} source={require('../assets/start-black.png')} />
                                            <Text style={styles.intStyle}>14</Text>
                                        </View>
                                    </View>
                                </View>
                            </TouchableOpacity>
                        }
                    />

目的地：

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';

const DiscoverDetails = ({ navigation, route }) => {
    const { item } = route.params;
    return (
        <View style={styles.screen}>
            <Text>{item.item.title}</Text>
        </View>
    )
}

export default DiscoverDetails;

const styles = StyleSheet.create({
    screen: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    }
})

另外，我知道我在这里发生的愚蠢的 item.item 情况。firebase 数据嵌套有点奇怪或其他东西，所以这是让数据显示的唯一方法。不确定这是否是问题的根源，但我已经尝试了 item.title 和 item.item.title 并且两者仍然产生错误。

提前致谢！

标签： reactjsreact-native

解决方案

这个问题，

在这里，您从 onPress 传递项目，而不是从渲染中获得的项目。

所以改变这个

<TouchableOpacity onPress={(item) => navigation.navigate("DiscoverDetails", { item })} style={styles.card}>

To（去掉参数项）

<TouchableOpacity onPress={() => navigation.navigate("DiscoverDetails", { item })} style={styles.card}>

推荐阅读