React BootstrapTable 如何为 firebase 数据动态创建行

Question

大家好，我正在开发 Web 应用程序 table，这是它的代码：

class Table1 extends Component {
  render() {
    return (
      <div>
        <BootstrapTable data={this.props.data}>
          <TableHeaderColumn isKey dataField='id'>
          </TableHeaderColumn>
          <TableHeaderColumn dataField='name'>
          </TableHeaderColumn>
          <TableHeaderColumn dataField='value'>
          </TableHeaderColumn>
        </BootstrapTable>
      </div>
    );
  }
}

export default Table1;

然后在我的 index.js 文件中，我使用它从 firebase 获取数据并将其放入 table

 db.onceGetUsers().on("child_added", snap =>{
                var username = snap.child("name").child("name").val();
  this.setState({users: username})

这是我将数据传递给 table 的方式：

  render() {
    var data = [
      {name: this.state.users}
    ];
    return (
      <body  className = "aa">
       <div >
        <div className = "bb">
         <Table1 data={data}/>
        </div>
       </div>
     </body>

它显示数据..但只在一行中。当我调试它时，只有一行出现第一个用户名，然后它消失了，第二个用户名出现，就像那样，最后它显示最后一个用户名，这一切只发生在 [= 列的一个单元格中22=]，我该如何解决？

Answer 1

您的 on("child_added" 将为每个用户调用。这意味着您需要从快照中获取用户并将其添加到某个集合，然后在 HTML.

中显示

我快速看了看how to add an item to an array in state，这似乎是地道的：

db.onceGetUsers().on("child_added", snap =>{
  var username = snap.child("name").child("name").val();
  this.setState({ users: this.state.users.concat([username]) }); 
});

在上面的片段中，我们将新用户添加到现有用户数组中。请务必在 getInitialState 中初始化数组。例如

getInitialState: function() {
    return {
        users: []
    };
}

React BootstrapTable 如何为 firebase 数据动态创建行

React BootstrapTable how to dynamically create rows for firebase data

javascript

reactjs

firebase

firebase-realtime-database

react-table