Question

大家好我想创建一个简单的表来与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;

它只是我在教程网站上找到的一个简单的表格代码，这就是我将数据传递给dable的方式：

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

和

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

并成功地在表格中显示"username"，没关系，但现在我想显示我的firebase数据库中的所有用户名，这就是我如何从firebase接收它：

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

所以..在这里我卡住了，因为我完全有把这个var username数据放在我的桌子上，我是网络应用程序的新手，甚至没有谈论React ..所以请有人帮助我想办法？

Answer 1

好。

将firebase的回复存储到state并根据需要使用

像。

     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})
        })
      }

然后使用state之类的this.state.responseFromFirebase响应。

就是这样。简单！

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

1 个答案: