React firebaseは最初の読み込み時にデータを複製しますが、更新時に重複しないで読み込みます。

Question

データを読み込んだ後にデータが読み込まれるテーブルを作成しています。問題は、最初のレンダリングではデータが複製され、テーブルの行にも重複がありますが、ページが再ロードされると、データは重複しなくなります。なぜ私のデータは最初の負荷では複製されますが、負荷では複製されません。ここで

は私のコードです：

import React from 'react'; 
import { firebaseAuth } from './../config/constants' 
import firebase from 'firebase' 

class PeopleDash extends React.Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
     uid: '', 
     people: [], 
     peopleTableArray: [["name", "dateOfBirth", "height", "doneWithSchool"]] 
    }; 
    } 

    componentWillMount() { 
    this.setState({ people: [] }); 
    } 

    componentDidMount() { 
    firebase.auth().onAuthStateChanged(function (user) { 
     if (user) { 
     console.log(user.uid); 
     this.setState({ uid: user.uid }); 
     this.setState({ people: [] }); 
     var firebaseChild = this.props.firebaseChild; 
     const ref = firebase.database().ref().child(firebaseChild).child(user.uid); 
     ref.once("value", function(snapshot){ 
      snapshot.forEach(function(data){ 
      this.setState({ 
       people: this.state.people.concat(data.val()) 
      }) 
      console.log(this.state.people); //ISSUE 

// ISSUE：この時点で、あなたはその

  }.bind(this)); 
     }.bind(this)); 
     } else { 
     console.log("no data"); 
     } 
    }.bind(this)); 
    console.log('componentDidMount ended and this.state.people = ' + {this.state.people}); 
    } 

    render() { 
    return (
     <div className="contentRow" id={this.props.id}> 
     <div className="dynamicSnapshotTable"> 
     { 
      // loop through each snapshot on firebase (for the user logged in) 
      this.state.people.map((item, i) => { 

      return (
       <div key={i} id={item.name} className="tableRowDiv"> 
       { 
       this.props.tableArray.map((attribute, j) => { 
        return (
        <div key={j} className="tableDataDiv"> 
         {(this.props.tableArray[j] == 'doneWithSchool') ? (
         (item[this.props.tableArray[j]]) ? ('tru') : ('fal') 
        ) : (
         item[this.props.tableArray[j]] 
        )} 
        </div> 
       ); 
       }) 
       } 

       </div> 
      ); 
      }) 
     } 
     </div> 
     </div> 
    ); 
    } 
} 

PeopleDash.propsTypes = { 
    id: React.PropTypes.string, 
    tableArray: React.PropTypes.array, 
    firebaseChild: React.PropTypes.string, 
}; 


export default PeopleDash; 

後の最初のページのロードのコンソールログの重複ではなく、任意の負荷を見ることができます前もって感謝します！

Answer 1

onAuthStateChangedイベントが複数回発生する可能性があります。表示されるたびに、ディスプレイにユーザーを追加します。

ref.once("value", function(snapshot){ 
    var people = []; 
    snapshot.forEach(function(data){ 
     people.push(data.val()); 
    }); 
    this.setState({ 
     people: people 
    }) 

これはまた、あなたが（たびに、認証状態の変化）を一度だけsetState()を呼び出していることを確認し、パフォーマンスAが向上します。

これを解決するには、必ずあなただけのクエリから人々を使用しますビット。