Question

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

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>

它显示数据..但只显示一行。当我对它进行去扩展时，只有一行出现第一个用户名，然后它消失，第二个用户名出现，就像那样，然后在最后显示最后一个用户名，这一切都只发生在列的一个单元格中＆＃34;名称＆＃34;，我该如何解决？

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中初始化数组。 E.g。

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

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

1 个答案: