我得到了一个FiRestore集合,其中同时包括2个文档(可能更多)。每个文档都有2个数组(数量和值),如下面的最后一个截图所示。
我希望获得所有数据,并在每次使用文档数组中的数据创建行时如下所示:
- 但我得到的却是这个:*
- FiRestore:*
- 代码:*
export default class NutritionTableOfTheUser extends Component {
constructor() {
super();
this.state = {
tableData: []
}
}
componentDidMount() {
const dbRef = collection(db, 'data');
onSnapshot(dbRef, (querySnapshot) => {
let foods = [];
querySnapshot.forEach(doc => {
foods.push(doc.data())
});
this.setState({ tableData: foods })
})
}
render() {
return (
<div className='container mt-3'>
{/* table */}
<table className='table table-hover'>
<thead>
<tr>
<th>#</th>
<th>Food</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
{this.state.tableData.map((row, index) => {
return (
<tr>
<td>{index + 1}</td>
<td>{row.value}</td>
<td>{row.quantity}</td>
</tr>
)
})}
</tbody>
</table>
</div>
)
}
}
1条答案
按热度按时间kqlmhetl1#
试试看