2

No sé en que estoy fallando y la verdad que no tengo a nadie que sepa y le pueda consultar, me tira el sigueinte error :

Unhandled Rejection (TypeError): casos.map is not a function.

La data la traigo bien , pero me falta algo que hace que no pueda utilizarla no se que es:

    import axios from "axios";
    import React, { useState, useEffect } from "react";
    
    export const PaisesAxios = () => {
      const [casos, setCasos] = useState([]);
      useEffect(() => {
        axios.get("https://covid-api.mmediagroup.fr/v1/cases").then((res) => {
          console.log(res.data.Global);
          setCasos(res.data.Global);
        });
      }, []);
    
      return (
        <div>
          {casos.map((e) => (
            <div key={e.confirmed}>
              <p>casos confirmados:{e.confirmed}</p>
            </div>
          ))}
        </div>
      );
    };

  

  
2
  • Muchisimas gracias por la explicación , me van a ver mas seguido apartir de ahora jaja Commented el 6 ene. 2022 a las 21:40
  • Que bueno que lograste avanzar, no olvides aceptar la respuesta y dar tu voto, esto ayuda a mantener el sitio bien documentado. Saludos
    – g.4
    Commented el 6 ene. 2022 a las 23:32

2 respuestas 2

1

La variable de estado casos se inicializa como un Array:

const [casos, setCasos] = useState([]);

Luego la propiedad res.data.Global es un Objeto JS, no un Array:

console.log(res.data.Global);//esto es un objeto js

Después, al aplicar setCasos, se cambia el valor de casos de array a objeto; por eso cuando se trata de procesar casos en el return con map se obtiene:

Unhandled Rejection (TypeError): casos.map is not a function.

map es un método del tipo Array JS, no de Object JS


Se puede acceder a la propiedad All y aplicar el set al estado casos como un objeto, aquí el demo:

function App() {
  const [casos, setCasos] = React.useState({});
  React.useEffect(() => {
    axios.get("https://covid-api.mmediagroup.fr/v1/cases").then((res) => {
      console.log(res.data);
      setCasos(res.data.Global.All);
    });
  }, []);

  return (
    <React.Fragment>
      <div>
        <p>Casos confirmados:{casos.confirmed}</p>
      </div>
    </React.Fragment>
  );
}

ReactDOM.render(<App/>, document.getElementById('root'))
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin ></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin ></script>

<div id="root"></div>

Notas de campo

  • Se puede usar Object.values para transformar una estructura tipo Objeto JS a un Array JS.

Doc Object.values

0

Esto podría servirte, armé este componente completo para probarlo:

import axios from "axios";
import { useState, useEffect } from "react";
import "./App.css";

function App() {
  const [casos, setCasos] = useState({});
  useEffect(() => {
    axios.get("https://covid-api.mmediagroup.fr/v1/cases").then((res) => {
      console.log(res.data);
      setCasos(res.data.Global.All);
    });
  }, []);

  return (
    <div className="App">
      <div>
        <p>casos confirmados:{casos.confirmed}</p>
      </div>
    </div>
  );
}

export default App;

No te funciona primero porque estás poniendo como valor inicial del useState un array, y no hay ningún array, todos los resultados son objetos.

res.data devulve un objeto llamado Global

Global tiene adentro un objeto llamado All

Y finalmente dentro del objeto All tenemos una key que se llama confirmed

Por último como no tenemos ningún array no es aplicable el map, ya que depositamos en el state ahora un objeto, podemos acceder al valor deseado por medio de {casos.confirmed}

Espero sirva para resolver tu inconveniente.

Quedo a las ordenes.

1

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.