每当该布局调用时，我如何在 class 组件中自动调用 function

Question

I want to call displaydata function automatically whenever the other layout call this one because I want to use setUID in Api to display data in the same layout. I already saved the data through other layout by using asyncStorage and test it by using alert, below is the proof.

Image of layout that shows alert

Here is the code:

import React, { Component, useEffect } from 'react';

import { View,Text,Dimensions,TouchableOpacity } from 'react-native';

import axios from 'axios';

import Card from './Card';

import CardSection from './CardSection';

import AsyncStorage from '@react-native-community/async-storage';


// Create a component

class ProfileActivity extends Component {

    constructor() {
      super();
      this.state = {
        profile: [],
        setUID:'',
          };
      
    }

    displayData = async ()=>{  
        try{  
            const user = await AsyncStorage.getItem('responseJson');  
            const parsed = JSON.parse(user); 
            this.setState({setUID:parsed.UID});
            console.log(this.state.setUID);
            console.log(this.state.profile);
        }  
        catch(error){  
          alert(error)  
        }  
    }  


    UNSAFE_componentWillMount()
    {
      axios.get('https://abc/UserInfo.php?UID='+this.state.setUID)
      .then(response => this.setState({profile: response.data}) );
    }

   
      
    render() {
        
        console.log(this.state.UserID);
        return (
           
            <View style={styles.container}>
                <Card >
                <CardSection >
                    {/* <View style={styles.ViewStyle}>
                        <Text style={styles.TextStyle}>UID     {this.state.profile.UID}</Text>
                    </View>
                    <View style={styles.ViewStyle}>
                        <Text style={styles.TextStyle}>Name    {this.state.profile.CFName} {this.state.profile.CLName}</Text>
                    </View>
                    <View style={styles.ViewStyle}>
                        <Text style={styles.TextStyle}>Company {this.state.profile.CCompany}</Text>
                    </View>
                    <View style={styles.ViewStyle}>
                        <Text style={styles.TextStyle}>Phone # {this.state.profile.CTelHome}</Text>
                    </View> */}
                    <View style={styles.ViewStyle}>
                        <Text style={styles.TextStyle}>UID</Text>
                        <Text style={styles.TextStyle}>Name</Text>
                        <Text style={styles.TextStyle}>Company</Text>
                        <Text style={styles.TextStyle}>Phone #</Text>
                        <Text style={styles.TextStyle}>setUID</Text>
                    </View>
                    <View style={styles.ViewStyle}>
                        <Text style={styles.TextStyle}>{this.state.profile.UID}</Text>
                        <Text style={styles.TextStyle}>{this.state.profile.CFName} {this.state.profile.CLName}</Text>
                        <Text style={styles.TextStyle}>{this.state.profile.CCompany}</Text>
                        <Text style={styles.TextStyle}>{this.state.profile.CTelHome}</Text>
                        <Text style={styles.TextStyle}>{this.state.setUID}</Text>
                    </View>
                    <TouchableOpacity onPress ={this.displayData}>  
                        <Text>sdsd</Text> 
                    </TouchableOpacity>
                </CardSection>
            </Card> 
            </View>
        );
    }
}

export default ProfileActivity;

const {height} = Dimensions.get("screen");
const height_logo = height * 0.30;

const styles = {
    container: {
        backgroundColor: '#fff'
    },
    ViewStyle: {
        paddingTop:50,
        
    },
    TextStyle: {
        justifyContent:'flex-start',
        // alignSelf: 'center',
        color: '#000',
        fontWeight: 'bold',
        fontSize: 20,
        padding: 5, 
        maxWidth: height_logo,        

    }
}

Answer 1

You can use componentWillMount() function provided by React-native. This function is triggered before render() function. So, if you perform all the actions of dispalyData function inside componentWillMount() , it'll be performed everytime you call this component before render() method.