反应导航不传递道具

Question

我有一个组件，它获取一个对象并在导航到屏幕时将其传递到新屏幕。但是，当我转到下一个屏幕时，传递的对象是未定义的。我在这里做错了什么？我对另一个组件做了完全相同的事情并且它工作得很好，但是在这个组件上，它没有正确传递参数。我还需要在导航器中配置什么吗？

GoalCard.JS

import * as React from 'react';

import 'react-native-get-random-values';
import { v4 as uuidv4 } from 'uuid';

import { useNavigation } from "@react-navigation/core";
import { Card, Chip, Divider, Paragraph, Text, Title } from 'react-native-paper';

const GoalCard = ({ item }) => {

    const navigation = useNavigation();
    const goals = JSON.parse(item.Goals);
    const tasks = JSON.parse(item.GoalTasks);
    const [goalsData, setGoalsData] = React.useState(
        {
            GoalName: item.GoalName,
            GoalID: item.GoalID,
            GoalDescription: item.GoalDescription,
            GoalComplete: item.GoalComplete,
            GoalTasks: tasks,
            Goals: goals,
            UserID: item.UserID,
            createdAt: item.createdAt,
            updatedAt: item.updatedAt
        }
    );
    
    
    return(
        <Card className="card">
            <Card.Content>
                <Title>Goal Set: {item.GoalName}</Title>
                <Divider/>
                <Paragraph>
                    <Chip
                        onPress={() => {
                            navigation.navigate(
                                'Goals', {
                                    goalsData: goalsData
                                });
                            }}
                    >
                    Edit
                    </Chip>
                    <Text onPress={() => console.log(goalsData)}>Log</Text>
                    <Text>Description: {item.GoalDescription}</Text>
                    <Divider/>
                    {Object.entries(goals).map(obj => (
                        <Text key={uuidv4()}>{obj[1].goal}{" "}</Text>
                    ))}
                </Paragraph>
            </Card.Content>
        </Card>
    );
}

export default GoalCard;

GoalScreen.js

按此文件中显示的“日志”returns undefined

import React from "react";

import { ScrollView, View } from "react-native";
import { Text } from "react-native-paper";

import { MainStyles } from "../../styles/Styles";

const GoalScreen = ({ route }) => {
    const { goalData } = route.params;

    return (
        <ScrollView>
            <View style={MainStyles.col}>
                <Text onPress={() => console.log(goalData)}>Log</Text>
            </View>
        </ScrollView>
    );
};

export default GoalScreen;

Answer 1

有错字……你正在设置

goalsData: goalsData

但是您正在尝试阅读以下内容

const { goalData } = route.params;

尝试

const { goalsData } = route.params;

反应导航不传递道具

React Navigation not passing props

javascript

reactjs

react-native

react-navigation