React.js和Firebase如何在我的Bootstraptable中显示数据

Question

Hi guys i want to create simple table in react with gets data from firebase, here is the code for table: 嗨，我想创建一个简单的表来响应从firebase获取数据，这是表的代码：

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;

it is just a simple table code that i found on a tutorial website, this is how i pass data to dable : 这只是我在教程网站上找到的简单表格代码，这就是我将数据传递给dable的方式：

var data = [
  {name: "username"}
];

and 和

  render() {
    return (
      <body  className = "aa">
       <div>
        <div className = "bb">
         <Table1 data={data}/>
        </div>
       </div>
      </body>
    );
  }

and successfully it displays "username" in table, thats fine, but now i want to display all usernames from my firebase database, thats how i recieve it from firebase: 并成功地在表中显示"username" ，这很好，但是现在我想显示我的Firebase数据库中的所有用户名，这就是我从Firebase接收它的方式：

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

so.. here im stuck, because i totally have how to put this var username data in my table, I am new in web apps, not even talking about React.. so please, can someone help me to figure it out? 所以..在这里我卡住了，因为我完全有办法将这个var username数据放到我的表中，所以我是Web应用程序的新手，甚至没有谈论React ..所以请有人可以帮我弄清楚吗？

Answer 1

Well. 好。

Store the response from firebase into state and use it as you want 将firebase的响应存储到state ，然后根据需要使用

Like. 喜欢。

     constructor() {
      this.state = {
       responseFromFirebase: type of response....
      }
     }
     componentDidMount() {
        db.onceGetUsers().on("child_added", snap =>{
          var username = snap.child("name").child("name").val();

          this.setState({responseFromFirebase: username})
        })
      }

Then use state response like this.state.responseFromFirebase . 然后使用诸如this.state.responseFromFirebase类的state响应。

That's it. 而已。 Easy! 简单！

React.js和Firebase如何在我的Bootstraptable中显示数据

问题描述

1 个解决方案

解决方案1
1 2018-04-20 17:17:15

React.js和Firebase如何在我的Bootstraptable中显示数据

问题描述

1 个解决方案

解决方案1 1 2018-04-20 17:17:15

解决方案1
1 2018-04-20 17:17:15