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

//问题：此时您可以看到第一页加载时控制台日志重复，但之后没有任何加载

          }.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()（每次身份验证状态发生变化），这会稍微提高性能。

React firebase在第一次加载时复制数据，但在刷新时加载没有重复

1 个答案: