[英]React Navigation not passing props
I have a component that takes an object and passes it to a new screen upon navigating to the screen.我有一个组件,它采用 object 并在导航到屏幕时将其传递到新屏幕。 However, when I go to the next screen the object passed is undefined.
但是,当我 go 到下一个屏幕时,通过的 object 是未定义的。 What am I doing wrong here?
我在这里做错了什么? I have done the exact same thing with another component and it works perfectly fine, but on this component, it isn't passing the parameter properly.
我对另一个组件做了完全相同的事情,它工作得很好,但是在这个组件上,它没有正确传递参数。 Is there something else I need to configure in the navigator?
我还需要在导航器中配置什么吗?
GoalCard.JS目标卡.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目标屏幕.js
Pressing "Log" as seen in this file returns undefined
按此文件中看到的“日志”返回
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;
There is a typo... You are setting有一个错字...您正在设置
goalsData: goalsData
But you are trying to read as below但是您正在尝试阅读如下
const { goalData } = route.params;
try尝试
const { goalsData } = route.params;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.