我们如何在 React js 中从 firebase 中读取一级嵌套深度数组数据？

Question

在我的 firebase 数据库中，我的数据如下所示

我从 firebase 读取数据的代码如下

export const startSetPartialExpenses = (() => {
    return (dispatch, getState) => {
        const uid = getState().auth.uid
        return database.ref(`users/${uid}/partialpayments`).once('value').then((snapshot) => {
            const partialExpenses = []
            
            snapshot.forEach((childSnapshot) => {
                
                partialExpenses.push({
                    id: childSnapshot.key,
                    ...childSnapshot.val()
                })
            })
            dispatch(setPartialExpense(partialExpenses))
        })
    }
})

从 firebase 读取数据后，当我的组件初始加载时，它具有如下数据

在这里，我将来自 firebase 数据库的 redux 存储中的数据复制到本地组件 object。

partialExpense: props.expense && props.expense.paidStatus === 'Partial Paid' ? props.partialExpense : [],

下面我添加了 map 逻辑来读取所有行

<tbody className="create__partial-tbody">
{this.state.partialExpense.map((row) => (
<tr className="create__partial-tr" key={row.balance}>
<td>
  <select
    value={row.partialPaidStatus}
    onChange={(event) => this.handlepartialPaidStatusChange(row.balance, event)}
    >
    <option value="Select"> {`  `} </option>
    <option value="Partial Paid">Partial Paid</option>
    <option value="Paid">Paid</option>
  </select>
</td>
<td >
  <input 
    type="text"
    placeholder="Amount"
    value={row.partialAmount}
    onChange={(event) => this.handlepartialAmountChange(row.balance, event)}
  />
</td>

添加上面的代码后，我在本地机器上运行了我的代码，它没有显示我的数据，它显示的是默认值。

Answer 1

要获得您期望的结果，需要两次迭代，每个键一次，每个“行”一次。 由于 map 仅适用于 arrays，因此您需要将其转换为可迭代的，我们还可以在其中存储密钥，以防您将来需要更新它。 为了保留您的结构，因为您的需要的上下文不清楚，我将 map 放到一个对象数组中。

const result = []
for (const [key, row] of Object.entries(data.val())) {
  for (const [index, value] of Object.entries(row)) {
    result.push({payKey: key, entry: index, ball: value.balance});
  }
}

从那里，您应该能够根据您的应用程序设计来操作循环和使用的代码。