Reactjs 访问组件外部的React本机状态值

我是个新来的本地人。我需要访问组件类之外的状态值。我正在使用Tab.NavigationAPI

import { StatusBar } from 'expo-status-bar';
import React, { Component } from 'react';
import { StyleSheet, Text, View, Alert, SafeAreaView } from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import FontAwesome from 'react-native-vector-icons/FontAwesome5';
//import Login from './Login';
import AntDesign from 'react-native-vector-icons/AntDesign';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
AsyncStorage.setItem("id", "Hello");
function HomeScreen() {
  return (
    <SafeAreaView style={{ flex: 1, alignItems: 'center', backgroundColor: "#fff", marginTop: 50, }}>
      <View style={{width: "100%", height: 45, backgroundColor: "#fff", flexDirection: "row", marginTop: 20}}>
          <View style={{width: "50%", alignContent: "left"}}>
              <Text style={{fontSize: 30, fontWeight: "900", alignSelf: "flex-start", marginLeft: 20}}><AntDesign name="user" color="#333" size={30} /> Wallet </Text>
          </View>
          <View style={{width: "50%", alignContent: "right"}}>
              <Text style={{fontSize: 20, fontWeight: "500", alignSelf: "flex-end", marginRight: 20}}>Add Cash <AntDesign name="plus" color="#333" size={30} /></Text>
          </View>
      </View> 
      <View style={{width: "80%", height: 120, backgroundColor: "#000", borderRadius: 20, marginTop: 30, alignContent: "center"}}>
        <Text style={styles.whiteHeader}>Available Balance</Text>
        <Text style={{fontSize: 30, fontWeight: "900", alignSelf: "center", marginLeft: 20, opacity: 0.8, color: "#333", marginTop: 10}}>NGN <Text style={{color: "#fff"}}>0.00</Text></Text>
          
      </View>
      <View style={{width: "80%", height: 100, backgroundColor: "#fff", borderColor: "#000", borderWidth: 3, marginTop: 40, borderRadius: 20}}>
        <Text style={styles.blackHeader}>Loan Balance</Text>
        <Text style={{fontSize: 30, fontWeight: "900", alignSelf: "center", marginLeft: 20, opacity: 0.8, color: "#333", marginTop: 10}}>NGN <Text style={{color: "#000"}}>0.00</Text></Text>
        
      </View>

    </SafeAreaView>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      myKey: ""
    }
    this.componentDidMount = this.componentDidMount.bind(this);
    this.getUserData = this.getUserData.bind(this);
  }
  componentDidMount(){
    AsyncStorage.getItem("Phone").then((value) => {
      this.setState({"myKey": value});
      fetch('https://savings.delibertyng.com/modules/api/data.php?id='+value)
      .then(response => response.json())
      .then(data => {
      var Data = data.Result[0]; 
      this.setState({
        Data: {
          Fullname: Data.name,
          Balance: Data.balance,
          Debt: Data.debt,
          JoinDate: Data.joindate,
          Email: Data.email,
          Address: Data.address,
          ID: Data.id,
          Phone: Data.id
        }
      })
      })
      .catch(error => console.error(error))
    }).done();
  }
  getUserData(){
  
  }
  render(){
    return (
      <NavigationContainer independent={true}>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen}
           options={{
            tabBarLabel: 'Home',
            tabBarIcon: ({ color }) => (
              <AntDesign name="home" color="#000" size={20} />
            ),
          }}
        />
        <Tab.Screen name="Settings" component={SettingsScreen}
          options={{
            tabBarLabel: 'Account',
            tabBarIcon: ({color}) =>( <AntDesign name="user" color="#000" size={20} />),
          }}
        />
        <Tab.Screen name="Normal" component={SettingsScreen}
          options={{
            tabBarLabel: 'Add Fund',
            tabBarIcon: ({color}) =>( <AntDesign name="pluscircleo" color="#000" size={36} />),
          }}
        />
        <Tab.Screen name="Loan" component={SettingsScreen}
          options={{
            tabBarLabel: 'Investment',
            tabBarIcon: ({color}) =>( <AntDesign name="wallet" color="#000" size={20} />),
          }}
        />
        <Tab.Screen name="More" component={SettingsScreen}
          options={{
            tabBarLabel: 'Loan',
            tabBarIcon: ({color}) =>( <AntDesign name="creditcard" color="#000" size={20} />),
          }}
        />      
        
      </Tab.Navigator>
    </NavigationContainer>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  whiteHeader: {
    color: "#fff",
    fontWeight: "600",
    alignSelf: "center",
    fontSize: 20,
    marginTop: 20,
    opacity: 0.5
  },
  blackHeader: {
    color: "#000",
    fontWeight: "600",
    alignSelf: "center",
    fontSize: 20,
    marginTop: 20,
    opacity: 0.5
  }
});

从“世博会状态栏”导入{StatusBar}；
从“React”导入React，{Component}；
从“react native”导入{样式表、文本、视图、警报、安全区域视图}；
从“@react native community/async storage”导入异步存储；
从'@react-navigation/native'导入{NavigationContainer}；
从'@react navigation/stack'导入{createStackNavigator}；
从“反应本机向量图标/材料通信图标”导入材料通信图标；
从“反应本机矢量图标/FontAwesome5”导入FontAwesome；
//从“./Login”导入登录名；
从“react native vector icons/AntDesign”导入AntDesign；
从“@react navigation/bottom tabs”导入{createBottomTabNavigator}；
setItem（“id”，“Hello”）；
功能主屏幕（）{
返回(
钱包
加现金
可用余额
NGN 0.00
贷款余额
NGN 0.00
);
}
函数设置屏幕（）{
返回(
设置！
);
}
const Tab=createBottomTabNavigator（）；
导出默认类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
我的钥匙：“
}
this.componentDidMount=this.componentDidMount.bind（this）；
this.getUserData=this.getUserData.bind（this）；
}
componentDidMount（）{
AsyncStorage.getItem（“电话”）。然后（（值）=>{
this.setState（{“myKey”：value}）；
取（'https://savings.delibertyng.com/modules/api/data.php?id=“+价值）
.then（response=>response.json（））
。然后（数据=>{
var数据=数据。结果[0]；
这是我的国家({
数据：{
Fullname:Data.name，
Balance:Data.Balance，
债务：数据。债务，
JoinDate:Data.JoinDate，
电子邮件：Data.Email，
地址：Data.Address，
ID:Data.ID，
电话：Data.id
}
})
})
.catch（错误=>console.error（错误））
}).完成（）；
}
getUserData（）{
}
render（）{
返回(
(
),
}}
/>
( ),
}}
/>
( ),
}}
/>
( ),
}}
/>
( ),
}}
/>      
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#fff”，
对齐项目：“居中”，
为内容辩护：“中心”，
},
白头人：{
颜色：“fff”，
重量：“600”，
对准自己：“居中”，
尺寸：20，
玛金托普：20，
不透明度：0.5
},
黑头：{
颜色：“000”，
重量：“600”，
对准自己：“居中”，
尺寸：20，
玛金托普：20，
不透明度：0.5
}
});

---

现在我需要访问主屏幕函数中的状态值。通过这种方式，在主屏幕函数中，我可以使用类似于

{this.state.Data.FullName}

的内容。每次我尝试此操作时，都会出现一个错误，显示this.state未定义。

您可以通过在层次结构中将数据放在更高的位置，然后通过道具将其传递下去来提升数据的范围，或者使用。实际上，由于看起来您使用的是而不是，因此此帖子可能很有用：。你需要通过道具传递状态。