react-native 6.x - 不再能夠接收參數值：未定義不是 object（評估 'this.props.navigation.state.params'

Question

更新 react-native 后，我的詳情屏幕無法再接收參數值。 下面是我的聯系人屏幕和詳細信息屏幕。

聯系屏幕

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;

詳細信息屏幕

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;

它返回以下錯誤

TypeError: undefined is not an object（評估'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)

我一直在谷歌搜索解決方案，比如 useNagivation & route，但沒有成功。 我希望這里的任何 react-native 都能闡明這個問題。 如果您給我示例代碼，將不勝感激。 我是 react-native 開發的新手。

Answer 1

在 DetailsScreen 中替換

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

經過

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