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 

を使用してログに記録することができます。それはうまくいくでしょう。あなたのロギングのために。