Question

我遵循了关于Firebase和React的https://www.youtube.com/watch?v=p4XTMvagQ2Q入门教程。我想进一步采取这一点，但我已经被困了一段时间。基本上，我想从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;
    });
});

最后，在render方法中，为listOfPositions中的每个元素生成一个react元素列表，并在render方法中呈现它：

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值。

在React上渲染Firebase列表

1 个答案: