After updating react-native, my detail screen is no longer able to receive the parameter value. Below is my Contact screen and Details screen.

Contact Screen

import React, { Component, PropTypes, useState } from 'react';
import { View, Text, FlatList, Button } from 'react-native';
import { contacts } from 'LiveFinder/app/config/data';
import colors       from 'LiveFinder/app/config/colors';
import { ListItem } from 'LiveFinder/app/components/ListItem';

class Contacts extends Component {

    handleRowPress = (item) => {
      console.log(item.name.first, item.name.last);
      this.props.navigation.navigate('Details',item);
    };
  
   render() {
    return (
      <FlatList
        style={{ backgroundColor: colors.background }}
        data={contacts}
        renderItem={({ item }) =>
         // <ListItem  contact={item} onPress={()=>console.log(item.name.first)} />
          <ListItem  contact={item} onPress={()=>this.handleRowPress(item)} />
          //<ListItem  contact={item} onPress={this.handleRowPress.bind(item)} />
        }
        keyExtractor={(item) => item.email}
      />
    );
  }
};

export default Contacts;

Details screen

import React, { Component, PropTypes } from 'react';
import { ScrollView } from 'react-native';
import { Header, Actions, Info } from 'LiveFinder/app/components/UserDetails';
import colors from 'LiveFinder/app/config/colors';
import { useRoute } from '@react-navigation/native';

class Details extends Component {
  render() {
    console.log("In Details");
    const contact = this.props.navigation.state.params;
    const firstname = contact ? contact.name.first : "is Null";
    console.log("name:",firstname);
    
    return (
      <ScrollView style={{ backgroundColor: colors.background}}>
        <Header {...contact} /> 
        <Actions {...contact} />
        <Info {...contact} />
      </ScrollView>
    );
  }
}


export default Details;

It returns the following error

TypeError: undefined is not an object (evaluating 'this.props.navigation.state.params')

below is my debug message from the console
 LOG  Running "LiveFinder" with {"rootTag":71}
 LOG  zoe bell
 LOG  In Details
 LOG  In Details
 ERROR  TypeError: undefined is not an object (evaluating 'this.props.navigation.state.params')

This error is located at:
    in Details (at SceneView.tsx:132)
    in StaticContainer
    in EnsureSingleNavigator (at SceneView.tsx:124)
    in SceneView (at useDescriptors.tsx:217)
    in RCTView (at View.js:32)
    in View (at CardContainer.tsx:281)
    in RCTView (at View.js:32)
    in View (at CardContainer.tsx:279)
    in RCTView (at View.js:32)
    in View (at CardSheet.tsx:33)
    in CardSheet (at Card.tsx:557)
    in RCTView (at View.js:32)
    in View (at createAnimatedComponent.js:211)
    in AnimatedComponent (at createAnimatedComponent.js:264)
    in AnimatedComponentWrapper (at Card.tsx:536)
    in PanGestureHandler (at GestureHandlerNative.tsx:14)

I have been googling for solutions, like useNagivation & route, with no success. I hope any react-native here to shed the light on this issue. Much appreciated if you give me sample code. I am a total new for react-native development.

CodePudding user response：

In DetailsScreen replace

const contact = this.props.navigation.state.params;

by

let {contact} = this.props.route.params;