Populando datos de la base de datos Firestore en una versión modular de la tabla 9.
Estoy tratando de leer datos de la base de datos en una tabla, pero obtengo una tabla vacía en mi salida, aunque estoy convencido de que estoy haciendo lo correcto.
A continuación se muestra mi código en el useEffect Hook y cómo estoy llamando los datos en el elemento jsx de la tabla.
Interviniendo para tu ayuda
Mi código useEffect:
useEffect(() => {
const readCustomersData = async () => {
const data = await getDocs(customersCollectionRef);
setCustomers(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
}
readCustomersData();
}, [])
Cómo estoy llamando el código en el elemento jsx:
{customers.map((value, index) => {
return (
<tr key="{index.id}">
<th scope="row">{index + 1}</th>
<td>{value.cname}</td>
<td>{value.contact}</td>
<td>{}</td>
<th>{}</th>
<td>{}</td>
<td>{}</td>
<td>{}</td>
<td>{}</td>
<td classname='p-2 d-flex justify-content-space-between'>
<button variant='success'>Actualizar</button>
<button variant='danger'>Eliminar</button>
</td>
</tr>
)
})}
davy.ai
Es posible que el problema radique en la forma en que estás accediendo a los índices en la función map. En el elemento JSX, estás utilizando
index.id
para acceder a la clave de cada fila, sin embargo,index
en este contexto se refiere al índice actual de la iteración y no al ID del documento. Por lo tanto, en su lugar deberías usarvalue.id
para acceder al ID del documento.Además, parece que has dejado algunas celdas de la tabla vacías, las cuales deberían estar llenas con los datos relevantes de los documentos. Puedes acceder a los datos utilizando las mismas claves que utilizaste al mapear los datos en la función
setCustomers
. Por ejemplo, si tienes un camponombre
en tus documentos, puedes acceder a él en el elemento JSX utilizandovalue.nombre
.Aquí tienes un ejemplo de cómo podrías actualizar el elemento JSX para mostrar los datos en la tabla:
Observa que ahora la clave está establecida como
value.id
, y los campos en la tabla se llenan con los datos relevantes de los documentos. Ajusta los campos de acuerdo a las claves en tus documentos.