我得到了一个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>
    )
}

}