componentDidMount中的状态始终为null，应该有来自任务变量的数据

Question

我有一个问题，每当我在componentDidMount中调用状态“modalData”时，状态总是为null，应该有来自任务变量的数据。

constructor(props){
    super(props);
    this.tasksRef = firebase.database().ref('/users/'+ this.props.card_id);
    this.state = {
        modalData : null,
    }
}

componentDidMount(tasksRef){
    var task = [];
    tasksRef.on('value', (dataSnapshot) => {
        task.push({
            about : dataSnapshot.val().about, 
            card : dataSnapshot.val().card,
            company : dataSnapshot.val().company,
            first_name : dataSnapshot.val().first_name,
            job_title : dataSnapshot.val().job_title,
            last_name : dataSnapshot.val().last_name,
            photo : dataSnapshot.val().photo,
            role : dataSnapshot.val().role,
            thumbnail : dataSnapshot.val().thumbnail,
            title : dataSnapshot.val().title,
            website : dataSnapshot.val().website,
            _key : dataSnapshot.key
        });
        console.log('dataSnapshot.val().first_name : ' + dataSnapshot.val().first_name);
    });
    console.log(task); //there is data
    this.setState({
        modalData : task,
    });
    console.log(this.state.modalData); //there is no data
}

Answer 1

setState是异步的，所以你需要添加一个回调来显示console.log，即：

this.setState({ modalData: task }, () => console.log(this.state));

setState Docs

Answer 2

设置后记录将无效。你可以使用

 this.state.modalData = task 

，然后记录它。那会有用。为你的日志记录。