Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » ReactJS » Cannot convert undefined or null to object

ReactJS - Cannot convert undefined or null to object

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de Juan José
Val: 7
Ha aumentado su posición en 8 puestos en ReactJS (en relación al último mes)
Gráfica de ReactJS

Cannot convert undefined or null to object

Publicado por Juan José (13 intervenciones) el 09/07/2021 09:06:32
Hola, buenas quiero mostrar datos en un componente. Los datos se piden en el mismo componente, entonces la funcion la declaro antes de hacer el return del componente pero me devuelve el fallo del titulo

Cannot convert undefined or null to object

Este sería mi codigo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
function RecogerDatos() {
    fetch("Actividad/Resumen", ParametrosPeticionPost)
        .then(response => response.json())
        .then((data) => {
            if (data.success === "1") {
                window.sessionStorage.setItem('JSONResumenActividad', data.datos);
            }
            else {
                return data.mensaje;
            }
 
        });
}
 
export function ResumenActividad()
{
    var ind = 0, ind2 = 0;
    RecogerDatos(); //No recupera los datos antes de lo que espero
    const arr = JSON.parse(window.sessionStorage.getItem('JSONResumenActividad'));
 
    return (
        Object.keys(arr).map(key =>
            <section key={ind++} className="estilosSectionResumenActividad">
                <div>
                    <p className="TituloSeccionesPilaDashboard">{key}</p>
                </div>
                <div className="contenedorPilasTipo">
                    {
                        Object.keys(arr[key]).map(key2 =>
                            <div key={ind2++} className="contenedorDocumentCardPilasTipo">
                                <DocumentCard type={DocumentCardType.compact} className="CuerpoDocumentCardResumenActividad" >
                                    <DocumentCardLogo logoIcon={arr[key][key2].logoIcon} styles={{ root: { backgroundColor: arr[key][key2].backgroundColor, color: arr[key][key2].color, width: '80px', textAlign: 'center', padding: '10px 10px 10px 10px' } }} />
                                    <DocumentCardDetails>
                                        <DocumentCardTitle title={arr[key][key2].valor + " " + key2} styles={estilosTituloPila}/>
                                        <DocumentCardTitle title={arr[key][key2].descripcion} styles={estilosDescripcionPila} />
                                    </DocumentCardDetails>
                                </DocumentCard>
                            </div>
                        )
                    }
                </div>
            </section>
        )
    );
}
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Juan José
Val: 7
Ha aumentado su posición en 8 puestos en ReactJS (en relación al último mes)
Gráfica de ReactJS

Cannot convert undefined or null to object

Publicado por Juan José (13 intervenciones) el 09/07/2021 16:01:06
Lo he solucionado.
En mi componente principal he creado este Lazy:
1
2
3
import { LazyResumenActividadPila } from './DashboardPilas';
 
 <LazyResumenActividadPila />
Este componente contiene:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import * as React from 'react'
import useNearScreen from '../UseNearScreen/UseNearScreenPilasResumenActividad';
 
const ResumenActividad = React.lazy(() => {
    return new Promise(resolve => {
        setTimeout(() => resolve(import("../Services/ServicePilasResumenActividad")), 500);
    });
})
 
export function LazyResumenActividadPila() {
    const { isNearScreen, fromRef } = useNearScreen();
    return <div ref={fromRef}>
        <React.Suspense fallback={ <h3>Cargando datos...</h3> }>
            {isNearScreen ? <ResumenActividad /> : <h3>Cargando datos...</h3>}
        </React.Suspense>
    </div>
 
}

Y el componente del Sevice contiene:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
function MontarComponentePilas() {
 
    const [componente, setComponente] = React.useState('');
 
    React.useEffect(function () {
        fetch("Actividad/Resumen", ParametrosPeticionPost)
            .then(response => response.json())
            .then((data) => {
                if (data.success === "1") {
                    var ind = 0, ind2 = 0;
                    var arr = JSON.parse(data.datos);
                    return (Object.keys(arr).map(key =>
                        <section key={ind++} className="estilosSectionResumenActividad">
                            <div>
                                <p className="TituloSeccionesPilaDashboard">{key}</p>
                            </div>
                            <div className="contenedorPilasTipo d-flex align-content-end flex-wrap">
                                {
                                    Object.keys(arr[key]).map(key2 =>
                                        <div key={ind2++} className="contenedorDocumentCardPilasTipo">
                                            <DocumentCard type={DocumentCardType.compact} className="CuerpoDocumentCardResumenActividad" >
                                                <DocumentCardLogo logoIcon={arr[key][key2].logoIcon} styles={{ root: { backgroundColor: arr[key][key2].backgroundColor, color: arr[key][key2].color, width: '80px', textAlign: 'center', padding: '10px 10px 10px 10px' } }} />
                                                <DocumentCardDetails>
                                                    <DocumentCardTitle title={arr[key][key2].valor + " " + key2} styles={estilosTituloPila} />
                                                    <DocumentCardTitle title={arr[key][key2].descripcion} styles={estilosDescripcionPila} />
                                                </DocumentCardDetails>
                                            </DocumentCard>
                                        </div>
                                    )
                                }
                            </div>
                        </section>
 
                    ))
                }
                else {
                    return data.mensaje;
                }
 
            }).then(setComponente);
    }, [])
 
    return componente;
};
 
export default function PilasResumenActividad() {
 
    return (<div> { MontarComponentePilas() }</div>)
};
Claramente se puede mejorar más el código, creando un componente genérico para los datos que sacamos de la promesa
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar