ファイヤーベースの更新時に反応コンポーネントが更新されない

Question

スマートホームダッシュボード（リアクションとファイヤーベースで構築）用の人物トラッカーを設定しました。しかし、firebaseデータベースが変更されたとき、それは反応コンポーネントに再描画を引き起こしていません。私はどこに間違っているのか分からない、誰かが私を助けてくれますか？

import React from 'react'; 
import * as firebase from 'firebase'; 
import moment from 'moment'; 

export default class IO extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     people: [] 
    }; 
    } 

    componentDidMount() { 
    let peopleArray = [] 
    this.dbroot = firebase.database().ref().child('io') 
    this.dbroot.on('value', snapshot => { 
     snapshot.forEach((snap) => { 
     if(snap.val().active === true) { 
      peopleArray.push(snap.val()) 
     } 
     }) 
     this.setState({people: peopleArray}) 
    }); 
    } 

    render() { 
    return(
     <section class="c-module c-module_IO"> 
     <ul> 
      { 
      this.state.people.map((p) => { 
       return <li key={ p.name } class={'status--'+p.status}><img src={p.image} alt={ p.name } /></li> 
      }) 
      } 
     </ul> 
     </section> 
    ) 
    } 
} 

Answer 1

コンポーネントを最初にマウントすると、ComponentDidMountが呼び出され、peopleArrayが初期化されます。これは一度だけ行われるため、Firebaseからアップデートを受け取るたびにこの配列に変更が加えられています。現在の実装では、peopleArrayへの参照が値ではなくポインタとして状態で保持されているため、状態を変更しています。 Reactは状態ツリーで何かが変更されたかどうかを調べるときに深い比較をしません。オブジェクトの比較を行います。これは、あなたの状態を突然変異させたくない、状態を設定するときに常に新しいオブジェクトを作成する理由です。これはまた還元のために行く。

非常に速い修正は、let peopleArray = []をfirebase onValueハンドラに移動して、アップデートを得るたびに新しい配列が作成されるようにすることです。また、現在の実装では、Firebaseの値を同じ配列に追加し続けるので、重複が発生する可能性があります。私が言及した修正はそれを同様に処理するでしょう。

componentDidMount() { 
    this.dbroot = firebase.database().ref().child('io') 
    this.dbroot.on('value', snapshot => { 
    let peopleArray = [] 
    snapshot.forEach((snap) => { 
     if(snap.val().active === true) { 
     peopleArray.push(snap.val()) 
     } 
    }) 
    this.setState({people: peopleArray}) 
    }); 
}