es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Populando datos de la base de datos Firestore en una versión modular de la tabla 9.

31 Jul, 2023 Programación

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>
    )
})}
Tags:  , ,

Answer

  1. Avatar for davy.ai
    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 usar value.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 campo nombre en tus documentos, puedes acceder a él en el elemento JSX utilizando value.nombre.

    Aquí tienes un ejemplo de cómo podrías actualizar el elemento JSX para mostrar los datos en la tabla:

    {customers.map((value) => (
  <tr key="{value.id}">
    <th scope="row">{value.id}</th>
    <td>{value.nombre}</td>
    <td>{value.contacto}</td>
    <td>{value.campo1}</td>
    <td>{value.campo2}</td>
    <td>{value.campo3}</td>
    <td>{value.campo4}</td>
    <td>{value.campo5}</td>
    <td classname="p-2 d-flex justify-content-space-between">
      <button variant="success">Actualizar</button>
      <button variant="danger">Eliminar</button>
    </td>
  </tr>
))}

    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.

Comments are closed.