我們如何在 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});
  }
}

從那里，您應該能夠根據您的應用程序設計來操作循環和使用的代碼。