Flatlist variable sent with navigate in React native but cannot be displayed-CodePudding

I passed and declared a variable(item) with navigate, but inside "return", It says undefined.

here variable(item)

{id: "001"
name: "name"}

code

import React, {useState,useEffect} from "react";
import {Text, View} from "react-native";
import styled from "styled-components/native";
import { TouchableWithoutFeedback, TouchableOpacity} from "react-native-gesture-handler";


const PlaySystem= ({navigation,route}) =>  {
  
const {data}= useState(null)
    useEffect(()=>{
    let {data} =route.params;
    console.log("first",data.id)

  },[])
  
    return ( 
     <Container>
      <StatusBar barStyle="Light-content"/>
       <View>
           <Text>{data?.name}</Text>
           { console.log("second",data.id) }
       </View>

     </Container>);}
export default PlaySystem;

console.log shows:

second undefined
first 001

CodePudding user response：

do it like this -

const PlaySystem= ({navigation,route}) =>  {
   let {data} =route.params;

    return ( 
     <Container>
      <StatusBar barStyle="Light-content"/>
       <View>
           <Text>{data?.name}</Text>
       </View>

     </Container>);}
export default PlaySystem;