未定义不是评估 route.params.input 的对象。在组件之间传递数据时出错。反应本机

Question

将文本输入从一个屏幕传递到另一个屏幕时出现上述错误。有趣的是，应用程序启动时会出现错误，并且会导致应用程序崩溃。但是，如果我删除以下代码中的行：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>
  );
};

Answer 1

问题出在 const { input } = route.params; 行 - 在 react-navigation 填充 route 对象之前，您将在尝试引用其嵌套属性时遇到错误。安全访问 route 对象将防止这种情况发生，即

const { input } = route?.params || {};

未定义不是评估 route.params.input 的对象。在组件之间传递数据时出错。反应本机

Undefined is not an object evaluating route.params.input. ERROR when passing data between components. REACT NATIVE

javascript

react-native

parameters

rendering

react-native-navigation