组件状态是否以意外方式更改?

时间:2018-11-07 08:41:22

标签: reactjs react-native

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

0 个答案:

没有答案