0

大家好，我正在制作网络应用程序，我正在构建表格，这里是它的代码：

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 获取数据并将其放入表中

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

这是我将数据传递到表的方式：

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

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

4

1 回答 1

1

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

我快速查看了如何将项目添加到 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: []
    };
}
于 2018-04-21T15:11:59.760 回答