每当调用该布局时,如何在 class 组件中自动调用函数
how Do I call function automatically in class component whenever the that layout called
我想在其他布局调用此布局时自动调用 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,
}
}
可以使用React-native提供的componentWillMount()
功能。此函数在 render()
函数之前触发。因此,如果您在 componentWillMount()
中执行 dispalyData
函数的所有操作,则每次在 render()
方法之前调用此组件时都会执行它。
我想在其他布局调用此布局时自动调用 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,
}
}
可以使用React-native提供的componentWillMount()
功能。此函数在 render()
函数之前触发。因此,如果您在 componentWillMount()
中执行 dispalyData
函数的所有操作,则每次在 render()
方法之前调用此组件时都会执行它。