Reactjs 在React上呈现Firebase列表

我遵循了有关Firebase和React的介绍性教程。我正试图更进一步，但我已经被困了一段时间。基本上，我希望从firebase节点检索子节点列表，并将其呈现为列表/表。当前，仅渲染最后一个子级，因为每一个子级都被覆盖

import React, { Component } from 'react';
import './App.css';

class App extends Component {

  constructor(){
    super();
    this.state = {
      id : 0,
      latitude : 0,
      longitude : 0
  };
}

componentDidMount(){
  const rootRef = firebase.database().ref().child('drivers');
  rootRef.on('child_added', snap => {
      console.log(snap.key);
      this.setState({
        id : snap.key,
        latitude : snap.val().lat,
        longitude : snap.val().lon
      });
  });
}


render() {
  return (
  <div className="App">
    <h1>{this.state.id}</h1>
    <h1>{this.state.latitude}</h1>
    <h1>{this.state.longitude}</h1>
  </div>
);
}
}

export default App;

import React，{Component}来自'React'；
导入“/App.css”；
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
id:0，
纬度：0，
经度：0
};
}
componentDidMount（）{
const rootRef=firebase.database（）.ref（）.child（'drivers'）；
rootRef.on（'child_added'，snap=>{
console.log（snap.key）；
这是我的国家({
id:snap.key，
纬度：snap.val（）.lat，
经度：snap.val（）.lon
});
});
}
render（）{
返回(
{this.state.id}
{this.state.latitude}
{this.state.longitude}
);
}
}
导出默认应用程序；

---

如何更新渲染函数以显示整个列表

正在发生的是，您正在检索整个列表，但对于列表中的每个元素，您都在用其值覆盖您的状态。然后，在您的状态中，您将始终拥有列表中的最后一个值

在这种情况下，您可以存储元素列表，比如位置：

this.state = {
    listOfPositions: []
};

然后，在添加子项时，将新子项的内容附加到当前列表中：

rootRef.on('child_added', snap => {
    const previousList = this.state.listOfPositions;
    previousList.append({
        id: snap.key,
        latitude: snap.val().lat,
        longitude: snap.val().lon
    });
    this.setState({
        listOfPositions: previousList;
    });
});

最后，在渲染方法中，为

listOfPositions

中的每个元素生成一个react元素列表，并在渲染方法中进行渲染：

render() {
    const listOfPositions = this.state.listOfPositions.map(position => 
        <div>
            <h1>{position.id}</h1>
            <h1>{position.latitude}</h1>
            <h1>{position.longitude}</h1>
        </div>
    );
    return (
        <div>{listOfPositions}</div>
    );
}

---

这将确保在调用

This.setState（）

时，您将在先前的state变量中拥有state的最后一个值。

首先，您必须将数据保存到某个位置，因为您无法呈现您没有的数据。因此，将其保存在相应的数据结构（即对象数组）中，并在数组上循环以渲染所有对象。你可以在网上找到很多例子。使用callback

setState

方法，使用'value'事件而不是child_addedGood调用。这让我在这件事上有了一段时间的警觉。

rootRef.on('child_added', snap => {
    const newPosition = {
        id: snap.key,
        latitude: snap.val().lat,
        longitude: snap.val().lon
    };
    this.setState(previousState => {
        listOfPositions: previousState.listOfPositions.append(newPosition);
    });
});