Estoy tratando de almacenar datos en mi estado. Cuando registro los datos en la consola, obtengo los datos correctos. Cuando lo almaceno en mi estado y lo registro en la consola, sigo recibiendo "c" en mi consola. ¿Por qué se almacena C en mi estado cuando no hay signos de "c" en todo mi código?
Esto sigue dándome C en mi consola.
const getIds = async () => { Axios.get( "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false" ).then((response) => response.data.map((res) => setCoinIds(...coinIds, res.id)) ); console.log(coinIds); };Esto registra los datos correctos:
const getIds = async () => { Axios.get( "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false" ).then((response) => response.data.map((res) => console.log(res.id))); };¿Por qué los datos no se almacenan en mi estado?
Están pasando algunas cosas:
Está recorriendo los recursos recibidos, pero reutilizando los mismos coinIds cada vez; que perderá las actualizaciones anteriores y solo mantendrá la última.
Te falta el [] en setCoinIds(...coinIds, res.id) , por lo que lo que estás haciendo es distribuir el valor de coinIds como argumentos discretos para setCoinIds . Pero setCoinIds ignorará todos menos el primer argumento.
Aparte del n. ° 1, también podría encontrarse con el problema del "cierre obsoleto". Su código establece el estado en función del estado existente (mediante el uso de coinIds al establecer el nuevo valor). También está haciendo un trabajo asíncrono, lo que significa que coinIds pueden estar desactualizados para cuando lo haga. En su lugar, utilice el formulario de devolución de llamada de setCoinIds .
Por separado, el archivo console.log al final de getId le mostrará el valor antes de la devolución de llamada de Axios, por lo que no le brinda ninguna información útil y podría ser confuso.
Finalmente, no hay razón para que getIds sea async . No está usando await dentro de él, está usando .then en su lugar. (También necesita un .catch ).
Arreglando esas cosas:
const getIds = () => { Axios.get( "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false" ) .then((response) => { setCoinIds(coinIds => [...coinIds, ...response.data.map(res => res.id)]) }) .catch(error => { // ...report/handle error... }); };Eso hace esto:
response.data obteniendo una matriz de los valores de id de cada uno de los objetos de datos.setCoinIds y completa todos los valores nuevos a la vez.[] por lo que estamos pasando una sola matriz.setCoinIds para que utilice el valor de estado más actualizado.