大家好，我正在制作网络应用程序，其中正在构建表格，这是它的代码:
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>
它显示数据..但只在一行中。当我调试它时，只有一行出现第一个用户名，然后它消失，第二个用户名出现，就像这样，然后最后显示最后一个用户名，这一切都发生在“名称”列中的一个单元格中“，我该如何解决这个问题？
最佳答案
您的 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: []
};
}
关于javascript - React BootstrapTable如何动态为firebase数据创建行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49955681/