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

Question

我有一个 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>
    )
}

Answer 1

尝试

onSnapshot(dbRef, (querySnapshot) => {
        let foods = [];
        querySnapshot.forEach(doc => {
            const {value, quantity} = doc.data()
            for(let i = 0; i < value.length; i++) {
              foods.push({value: value[i], quantity:quantity[i]})
            }
        });
        this.setState({ tableData: foods })
})