Javascript 从包含 2 个数组(值和数量)的文档中将数据从 Firestore 提取到表中

我得到了一个FiRestore集合，其中同时包括2个文档(可能更多). 每个文档都有2个数组(数量和值)，如下面的最后一个截图所示.

我希望获得所有数据，并在每次使用文档的数组100中的数据创建行时

100

100

100

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

}