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

React BootstrapTable how to dynamically create rows for firebase data

大家好,我正在开发 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=],我该如何解决?

您的 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: []
    };
}