Skip to main content
se añadieron 266 caracteres en el cuerpo
Origen Enlace
g.4
  • 3.5k
  • 2
  • 11
  • 22

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.

Puedesmap 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<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

La propiedad res.data.Global es un Objeto JS, no un Array, por eso cuando se trata de procesar en el return se obtiene:

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

Puedes 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

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

Origen Enlace
g.4
  • 3.5k
  • 2
  • 11
  • 22

La propiedad res.data.Global es un Objeto JS, no un Array, por eso cuando se trata de procesar en el return se obtiene:

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

Puedes 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