Obtener datos incorrectos almacenados en la variable de estado cuando se registran los datos correctos en la consola

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?

Answer

Están pasando algunas cosas:

  1. Está recorriendo los recursos recibidos, pero reutilizando los mismos coinIdscada vez; que perderá las actualizaciones anteriores y solo mantendrá la última.

  2. Te estás perdiendo el []in setCoinIds(...coinIds, res.id), por lo que lo que estás haciendo es distribuir el valor de coinIdscomo argumentos discretos a setCoinIds. Pero setCoinIdsignorará todos menos el primer argumento.

  3. Aparte del n. ° 1, también podría encontrarse con el problema del "cierre obsoleto". Su código está configurando el estado en función del estado existente (al usar coinIdsal configurar el nuevo valor). También está haciendo un trabajo asincrónico, lo que significa que coinIdspuede estar desactualizado para cuando lo haga. En su lugar, utilice el formulario de devolución de llamada de setCoinIds.

Por separado, console.logal final fo getIdle 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 getIdsserlo async. No estás usando awaitdentro de él, estás usando .thenen 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:

  • Recorre response.datapara obtener una matriz de los idvalores de cada uno de los objetos de datos.
  • Realiza una sola llamada a setCoinIds, completando todos los valores nuevos a la vez.
  • Usos [], por lo que estamos pasando una sola matriz.
  • Utiliza el formulario de devolución de llamada de setCoinIdspara utilizar el valor de estado más actualizado.