Javascript 使用来自其他类的数据

我有一个类，在这个类中我向数据库查询一些信息，我想用这些信息来显示

类，我将在其中显示数据

---

通过这种方式，我记录了FirstName，而不是使用这些信息在

ShowProfile

中显示为

this.state.FirstName

。我该怎么做？

像那样使用全局变量

  import React, { Component } from "react";
    import FindUser from './FindUser';
    let findUser = new FindUser();

    class ShowProfile extends Component{
    construct(props) {
    super(props);
    global.Fusername=""; 
    global.Lusername=""; 
    }
    //...

    render() {
        return (
          <View style={style.container}>
            <KeyboardAwareScrollView>
              <View style={style.page}>
                <Text style={visualProfilo.text}>Name:</Text>
                <Text style={visualProfilo.text1}>{global.username}</Text>
                <Text style={visualProfilo.text}>Surname:</Text>
                <Text style={visualProfilo.text1}>{global.Lusername}</Text>
    //...
    }


    class FindUser extends Component {
        constructor(props){
            super(props);
            this.state = {
            }
        }

        findUser(cf) {
            let params = {};
            params = {
              "Person.FiscalCode": cf
            };
            //... query to DB
              .then(response => {
                let utente = response.docs[0];
                console.log("name: ", user.Person.FirstName)
    global.Fusername = user.Person.FirstName
global.Fusername = user.Person.LastName

然后，确保它在项目初始化时执行。例如，在index.js中导入文件：

import './global.js'
// other code

---

现在，您可以在任何地方使用全局变量，而不需要在每个文件中导入global.js。尽量不要修改它们

要实现您正在使用的React本机异步存储，最好的方法是将用户信息保存在其中，并使用componentDidMount生命周期方法检索到状态

这里有一个例子

您可以使用以下命令从类A获取用户信息

   import {AsyncStorage} from 'react-native';

   GetUser = () => {
        return fetch( "http://sample.com/api/user/user.php", {
          method: "POST",
          headers:{
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            action: 'fetch'
          })
        }).then((response) => response.json()).then((responseJsonFromServer) => {
             AsyncStorage.setItem("datakey", JSON.stringify(responseJsonFromServer));
        })
      }

在类B中，您使用组件didmount使用为数据声明的密钥从异步存储中检索信息，并将其保存在如下状态

this.state = {
        FirstName: "",
        OtherData: ""
    }
    componentDidMount(){
        AsyncStorage.getItem("datakey").then((data) =>{
          const val = JSON.parse(data);
          this.setState({
            FirstName: data.firstname,
            OtherData: data.otherdata,
          })
        })
      }

现在可以在渲染函数中显示数据，如下所示

View>
  <Text>{this.state.Firstname}</Text>
  <Text>{this.state.OtherData}</Text>
</View>

View>
{this.state.Firstname}
{this.state.OtherData}

---

我希望这有助于使用react-native异步存储您可以在这种情况下使用react-Context。由于我对react-native一无所知，我想问您使用全局变量是否是一种好做法，特别是因为​​FirstName和LastName的名称始终不同，具体取决于试图使用全局变量的用户，但它们不会显示在视图中。如果您使用的是api（令牌基身份验证），则必须使用全局变量。有时，它非常有助于使用，但很难维护。使用componentDidmount方法调用您的数据，而不是其他类。如果您不明白，我可以帮您举个例子是的，我正在使用API，但是当我试图在视图中显示全局变量时，它们不是shownOk，然后我可以在我想要的地方使用此.setState中的值？答案已更新。如果这对您有帮助，请不要忘记标记为“应答”。我已经尝试了您的代码，但收到了以下错误：无法读取null的属性“FirstName”。可能是因为我不执行提取，但我从以下位置恢复数据：

global.user.db.localdb（）.find（{selector:params}）

API返回的响应类型是什么？答案也是实现你需要的东西的指南。您的API数据是否包含

FirstName

？是的，它包含FirstName，我通过：

global.user.data

获取信息，然后使用

global.user.data.Person.FirstName

恢复FirstName。如果我将代码中的

响应

记录到console.log中，则不会打印该响应。

   import {AsyncStorage} from 'react-native';

   GetUser = () => {
        return fetch( "http://sample.com/api/user/user.php", {
          method: "POST",
          headers:{
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            action: 'fetch'
          })
        }).then((response) => response.json()).then((responseJsonFromServer) => {
             AsyncStorage.setItem("datakey", JSON.stringify(responseJsonFromServer));
        })
      }

this.state = {
        FirstName: "",
        OtherData: ""
    }
    componentDidMount(){
        AsyncStorage.getItem("datakey").then((data) =>{
          const val = JSON.parse(data);
          this.setState({
            FirstName: data.firstname,
            OtherData: data.otherdata,
          })
        })
      }

View>
  <Text>{this.state.Firstname}</Text>
  <Text>{this.state.OtherData}</Text>
</View>