reactjs - 在 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 中的每个元素生成一个 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.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 变量中获得最后一个状态值。