0

estoy intentando recorrer un array, pero me da este error "Cannot read property 'map' of undefined", alguien me puede hechar una mano con esto?? Gracias de antemano.

La variable claims me retorna un array, lo intente convertir en json y tampoco sirvio.

Hay alguna otra manera de recorrerlo?

Saludos.

import React from "react";
import PropTypes from "prop-types";
import userStore from "../../stores/userStore";
import * as userActions from "../../actions/userActions";
import Header from "../common/Header";

const ViewClaims = props => {
  const id = props.match.params.id;
  userActions.loadUserById(id);
  const user = userStore.getUserById();
  const claims = user.claims;
  console.log(claims);
  return (
    <>
      <Header />
      <main role="main" className="container">
        <div className="col-md-8">
          <h2>Users Claims</h2>

                  <ul>
                    {claims.map(claim => {
                      return <li key={claim.id}>{claim.type}</li>;
                    })}
                  </ul>

        </div>
      </main>
    </>
  );
};

ViewClaims.propTypes = {
  match: PropTypes.object.isRequired,
  history: PropTypes.object.isRequired
};

export default ViewClaims;

3
  • Estoy oxidado en reactjs, pero userActions.loadUserById(id); debiera ser asíncrono y emitirle un evento al store que cambiará su estado. Tú tienes que haber suscrito tu componente para que su estado cambie junto con el userStore. le va a tirar un cambio de estado al store, por lo que tu vista de alguna manera tiene que meterle un listener al store (ej UserStore.addChangeListener(...);`) y cambiar su propio estado (por ejemplo this.state.claims) . De todos modos en el render debiera ser {claims && claims.map(...) } como salvaguarda
    – ffflabs
    Commented el 27 nov. 2019 a las 5:58
  • Exacto. Luce como un buen ejemplo de usar el hook useEffect para invocar la acción asíncrona que carga el usuario. Y el fallback de mostrar algo alternativo si claims está vacío o está indefinido Commented el 27 nov. 2019 a las 6:09
  • Hola, si tienen razon, aparte de la respuesta que me han dado abajo, tuve que hacer uso de lo state, useEffect, addChangeListener, etc, para que pueda funcionar del todo bien. Gracias por responder. Saludos
    – Leblanc
    Commented el 27 nov. 2019 a las 15:47

1 respuesta 1

0

Para solucionar el error que comentas basta con que asignes el valor de [] array vacío a la inicialización, de manera que el map no "casque" o te muestre error por no existir o tener un tipo diferente.

Te bastaría con algo así:

const claims = user.claims || [];
1
  • 1
    Excelente amigo me sirvió, muchas gracias, la verdad que soy new en react y estoy aprendiendo poco a poco. Saludos.
    – Leblanc
    Commented el 27 nov. 2019 a las 15:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.