React：Firebaseのデータを小道経由で渡します

Question

props経由でFirebaseのデータを1つのコンポーネントから別のコンポーネントに渡そうとしていますが、子コンポーネントのFirebaseデータを反復処理しているようには見えません。

App.js

class App extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     games: [] 
    }; 
    } 

    componentDidMount() { 
    const gamesRef = firebase.database().ref('games').orderByKey(); 

    gamesRef.once('value', snap => { 
     snap.forEach((childSnapshot) => { 
     this.state.games.push(childSnapshot.val()); 
     }) 
    }) 
    } 

    render() { 
    return (
     <div className="App"> 
     <Games data={ this.state.games } /> 
     </div> 
    ); 
    } 
} 

Games.js

class Games extends Component { 
    componentDidMount() { 
    console.log(this.props.data); // this logs successfully 
    } 

    render() { 
    return (
     <div className="container"> 
     <div className="Games flex flex-end flex-wrap"> 
      { this.props.data.map(function (game, i) {    
      return (
       <h1>{ game.title }</h1> 
      ) 
      }) } 
     </div> 

     </div> 
    ); 
    } 
} 

私props.data上map()にしようとしたとき、私は問題を抱えているいくつかの理由。 Fireboxから戻ってくるデータでconsole.log(this.props.data)をコンソールに表示しているので、間違いなく私のGamesコンポーネントに渡されています。

マッピングする前にFirebaseのデータが解決するのを待つ必要がありますか？もしそうであれば、どうすればいいですか？

何か助けていただければ幸いです。前もって感謝します！

Answer 1

問題は、あなたのアプリケーションクラスのcomponentDidMountにあると思います。あなたは状態を更新中です

this.state.games.push(childSnapshot.val()); 

あなたはそうしてはいけません。状態はthis.setStateで更新する必要があります（少なくともthis.forceUpdate（）を使用する必要があります）。そうしないと、再レンダリングされません。私の代わりにこれはゲームコンポーネントに小道具として渡される新しいデータを引き起こし、アプリケーション・コンポーネントの再描画が発生します

componentDidMount() { 
    const gamesRef = firebase.database().ref('games').orderByKey(); 
    let newGames; 

    gamesRef.once('value', snap => { 
    snap.forEach((childSnapshot) => { 
     newGames.push(childSnapshot.val()); 
    }) 
    }) 

    this.setState({games: newGames}); 
} 

をやって助言します。