Recojo datos de la API y los paso al componente Tabla de esta manera:

function MainSectionOrganization() {

    const [obj, setObj] = useState([]);

    useEffect(() => {
        fetch('http://127.0.0.1:5000/getCompanies')
        .then((response) => {
            return response.json();
        }).then((data) => {
            setObj(data);
        })
    }, []);

    return (
        <Table data={obj} />
    )
}

Luego, en el componente Tabla, trato de hacer console.log para props.data [0] y veo los datos en el terminal de Chrome correctamente.

import React from 'react';
import './Table.css';
import { useTable } from 'react-table';

function Table(props) {

    console.log(props.data[0]);
    ...

enter image description here

Sin embargo, cuando intento acceder a cualquier propiedad del objeto, por ejemplo, console.log (props.data [0] .OU01_Code ), encuentro un error No se puede leer la propiedad ' ... 'de indefinido

Veo que muchas personas tienen una solución con el componente de clase, pero por alguna razón necesito usar el componente de función. ¿Me pueden ayudar en este?

1
Dimisizz 23 jun. 2020 a las 22:16

3 respuestas

La mejor respuesta

Oye, el problema es que intentas acceder a props.data[0].OU01_Code y TODAVÍA no está allí, así que debes hacer algún tipo de condición para verificar que esté allí. Tratar:

if (props.data && props.data[0]) {
  console.log(props.data[0].OU01_Code)
}

Avísame si te ayuda, salud

4
Evgeny Klimenchenko 23 jun. 2020 a las 19:22

fetch es asíncrono. Entonces, lo primero que hace el componente es renderizarse con una matriz vacía:

const [obj, setObj] = useState([]);
//...
return (
    <Table data={obj} />
)

Cuando eso sucede, cualquier referencia a un elemento de esa matriz sería undefined:

props.data[0]

Por lo tanto, intentar leer una propiedad de ese elemento de matriz indefinido daría lugar a ese error exacto:

props.data[0].OU01_Code
// Cannot read property 'OU01_Code' of undefined

Después fetch resuelve su resultado y el estado se actualiza, obj tiene elementos (presumiblemente) y puede acceder a ellos.


Conceptualmente, debe manejar la situación en la que su matriz está vacía. ¿Desea mostrar <Table /> en ese caso? Si no, puede mostrarlo condicionalmente en el componente principal:

return (
    <>
        {obj.length > 0 && <Table data={obj} />}
    </>
)

O si desea mostrar <Table /> con una matriz vacía, deberá incluir la lógica dentro de ese componente (que no podemos ver en este momento) para manejar una matriz vacía. Básicamente, debe verificar props.data.length antes de intentar acceder a props.data[0].

3
David 23 jun. 2020 a las 19:23

Debido a que el renderizado inicial ocurrirá antes de que se complete la llamada a la API, puede usar props.data && console.log(props.data[0]) o si está abierto a usar Encadenamiento opcional sería fácil incluso props?.data?.[0]

1
pageNotfoUnd 23 jun. 2020 a las 19:24