每当调用该布局时，我如何在类组件中自动调用函数答案

【问题标题】：how Do I call function automatically in class component whenever the that layout called每当调用该布局时，我如何在类组件中自动调用函数
【发布时间】：2021-05-13 08:39:36
【问题描述】：

我想在其他布局调用此布局时自动调用 displaydata 函数，因为我想在 Api 中使用 setUID 以在同一布局中显示数据。我已经使用 asyncStorage 通过其他布局保存了数据，并使用 alert 对其进行了测试，以下是证明。

Image of layout that shows alert

代码如下：

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,        

    }
}

【问题讨论】：

标签： javascript reactjs react-native asyncstorage

【解决方案1】：

你可以使用 React-native 提供的componentWillMount() 函数。该函数在render() 函数之前触发。所以，如果你在componentWillMount()里面执行了dispalyData函数的所有动作，那么每次你在render()方法之前调用这个组件都会执行。

【讨论】：