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

Question

In my firebase database my data looks like below

my code to read data from firebase as below

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

after reading data from firebase, It has data like below when my component initial load

Here I am copying data to local component object from redux store which is coming from the firebase database.

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

below I added map logic to read all the rows

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

after adding above code, I ran my code locally machine and it is not displaying my data, it is displaying default values.

Answer 1

To get the result you are expecting will require two iterations, one for each key and one for each 'row'. Since map's only work on arrays, you need to convert it to an iterable where we can also store the key should you need to update it in the future. to preserve your structure as the context of your needs is unclear, I will map it to an array of objects.

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

from there, you should be able to manipulate the loop and code in use per your apps design.