[英]Undefined is not an object evaluating route.params.input. ERROR when passing data between components. REACT NATIVE
将文本输入从一个屏幕传递到另一个屏幕时出现上述错误。 有趣的是,当应用程序启动并且应用程序崩溃时会出现错误。 但是,如果我删除以下代码中的行: const { input } = route.params; 运行应用程序。 它不会崩溃。 因此,我可以通过文本输入导航到屏幕。 输入一些文本。然后添加回 const { input } = route.params; 该应用程序正常工作,并且数据正在从一个屏幕传递到另一个屏幕。 如果我刷新应用程序,它会崩溃。 我尝试对一些数据进行硬编码,因此应用程序启动时 Textinput 不为空。 它不起作用,应用程序在启动时仍然崩溃。 下面是我的代码? 任何想法为什么会发生提到的行为?
在这里,我在屏幕上导航:文本输入所在的 Opci Podaci 并显示数据 {input}:
import React, {useContext, useState} from "react";
import styled from "styled-components";
import { Text, View, ScrollView} from "react-native";
import {List} from "react-native-paper";
import { OpciPodaciOglasInput } from "../../components/iznajmljivanje.PodaciInput/opciPodaciInput";
export const IznajmiScreen = ({navigation, route}) => {
const { input } = route.params;
return (
<>
<SectionContainer>
<ScrollView>
<List.Accordion
title="Detalji Oglasa"
left={(props) => <List.Icon {...props} icon="car-sports" />}
expanded={detaljiExpanded}
onPress={() => setDetaljiExpanded(!detaljiExpanded)}
>
<List.Item title="Unesi Opis..."
onPress={()=>navigation.navigate("Opci Podaci")} />
<List.Item />
</List.Accordion>
<Text>{input}</Text>
</ScrollView>
</SectionContainer>
</>
);
};
文字输入画面(代码中的Opci podaci):
import React, {useState} from "react";
import styled from "styled-components";
import {TextInput, View, StyleSheet, Text, Button} from "react-native";
export const OpciPodaciOglasInput = ({navigation}) => {
const [input, setInput] = useState("");
return(
<>
<Button title="Save"
onPress={()=>navigation.navigate("Rent a car", {input})}/>
<InputContainer>
<Text>Unesi Podatke</Text>
<TextInput style={styles.input}
placeholder="300 rijeci maximum"
multiline = {true}
maxLength={300}
onChangeText={(text)=> setInput(text)}
returnKeyType='done'
value={input}
onSubmitEditing={()=>{
navigation.navigate('Rent a car',{input});
setInput("");
}}
/>
</InputContainer>
</>
);
};
还有我的导航:
import React from "react";
import { Button } from "react-native";
import {createStackNavigator, CardStyleInterpolators} from "@react-navigation/stack";
import { IznajmiScreen } from "../screens/tabNavigation.screens/iznajmiScreen";
import { OpciPodaciOglasInput } from "../components/iznajmljivanje.PodaciInput/opciPodaciInput";
const IznajmiStack = createStackNavigator();
export const IznajmiScreenNavigator = ({ route, navigation }) => {
return (
<IznajmiStack.Navigator
screenOptions="screen"
screenOptions={{
cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
}}
>
<IznajmiStack.Screen
options={{headerRight:()=>(<Button title="Predaj Oglas"
onPress={()=>{}}/>)}} //TODO on PRESS
name="Rent a car"
component={IznajmiScreen}
/>
<IznajmiStack.Screen name="Opci Podaci" component={OpciPodaciOglasInput}/>
</IznajmiStack.Navigator>
);
};
问题是const { input } = route.params;
- 在 react-navigation 填充route
object 之前,尝试引用其嵌套属性时会出错。 安全访问route
object 将防止这种情况,即
const { input } = route?.params || {};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.