javascript - 使用另一个类的数据

Question

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

我要显示数据的类。

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

class ShowProfile extends Component{
construct(props) {
super(props);
}
//...

render() {
    return (
      <View style={style.container}>
        <KeyboardAwareScrollView>
          <View style={style.page}>
            <Text style={visualProfilo.text}>Name:</Text>
            <Text style={visualProfilo.text1}>{this.state.FirstName}</Text>
            <Text style={visualProfilo.text}>Surname:</Text>
            <Text style={visualProfilo.text1}>{this.state.LastName}</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)

通过这种方式，我记录了 FirstName，然后使用这些信息在 ShowProfile 中显示为 this.state.FirstName。我该怎么办？

Answer 1

使用 React Native 异步存储实现目标的最佳方法是，将用户信息保存在其中并使用 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 类中，您使用 componentDidMount 使用为数据声明的键从异步存储中检索信息，并将它们保存在如下状态中

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>

希望这有帮助