import React, { Component } from 'react';
import axios from 'axios';
import { View } from 'react-native';
import { Text } from 'native-base';
import { IP_ADDRESS } from '../../authentication/local';
class QuestionerDetail extends Component {
constructor(props) {
super(props);
this.state = {
userData: '',
questionerId: ''
}
this.getUser = this.getUser.bind(this);
}
componentDidMount() {
console.log("*********************************");
const questionerId = this.props.questionerId
this.setState({ questionerId }, () => {
console.log("questionerId: ", questionerId);
console.log("**********************************");
});
}
componentWillReceiveProps() {
console.log("questionerIdReceive: ", this.state.questionerId);
}
getUser() {
const { questionerId } = this.state;
console.log("questioner details: ", questionerId);
axios.get(`http://${IP_ADDRESS}/api/userDatas/${questionerId}`)
.then(response => {
this.setState({ userData: response.data });
})
.catch(err => {
console.log("WHAT THE FUCK ERR: "+err);
});
}
render() {
const { userData, questionerId } = this.state;
return(
<View style={{ marginBottom: 20, display: 'flex', flexDirection: 'row', justifyContent: 'flex-end' }}>
<View style={{ width: 200, backgroundColor: '#E1ECF4', padding: 3, paddingBottom: 5 }}>
<Text style={{ marginBottom: 3, fontSize: 14, color: 'rgba(0,0,0,0.65)' }}>{this.props.date}</Text>
<View style={{ display: 'flex', flexDirection: 'row' }}>
<View style={{ height: 32, width: 32, backgroundColor: '#393232' }}></View>
<View style={{ display: 'flex', flexDirection: 'column', paddingLeft: 5, marginTop: -3 }}>
<Text style={{ fontSize: 13, marginBottom: 0, color: '#393232' }}>{ userData && userData.displayName }</Text>
<Text style={{ fontSize: 12, marginBottom: 0, color: '#848d95' }}>{ userData && userData.reputationNumber }</Text>
</View>
</View>
</View>
</View>
)
}
}
export default QuestionerDetail;
所以我像这样创建一个QuestionerDetail实例
{ details && <QuestionerDetail date={ `${moment(details.date).format("MMM DD YYYY")} at ${moment(details.date).format("h:mm")}`} questionerId={details.questionerId} /> || <View></View> }
每当componentWillReceiveProps被调用时,只要我知道调用setState时状态会发生变化,我就记录this.state.questionerId,但是在接受第一个props之后,this.state.questionerId是未定义的。
这是输出
questionerIdReceive: 5bdf419d37782a05fc95ef06
questionerIdReceive: undefined
questionerIdReceive: undefined
questionerIdReceive: undefined
questionerIdReceive: undefined