在 React 上渲染 Firebase 列表

Question

我遵循了这个 https://www.youtube.com/watch?v=p4XTMvagQ2Q 关于 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;

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

Answer 1

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

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

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 中的每个元素生成一个反应元素列表，并在渲染方法中渲染它：

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.state.listOfPositions 获取值时，您不能保证状态值是最新的。因此，如果您想确定它，请使用 this.setState() 方法的其他定义，如下所示：

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);
    });
});

这将确保当您调用 this.setState() 时，您的 previousState 变量中将拥有 state 的最后一个值。