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 tipoObjeto JS
a unArray JS
.