1

usando el hook useEfect hago una petición GET y funciona pero en la consola del navegador me retorna la advertencia:

[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.

Entiendo que esto es por que el codigo donde hago la llamada no es asincrono, pero no sé donde debería colocar el async/await

codigo:

const [user, setUser] = useState({});

useEffect(() => {
    Axios.get(`http://localhost:8080/user/${userId}/detail`, {
        headers: {
            Authorization: accessToken,
        },
    }).then((response) => {
        setUser(response.data);
    });
}, [accessToken, userId]);

Si coloco "async" en la función anónima dentro del useEffect sale esta advertencia:

Effect callbacks are synchronous to prevent race conditions. Put the async function inside

donde debería ponerlo? y además sería mejor hacer la llamada sin el useEffect?

1
  • 1
    No puedo emular el mensaje [Deprecation]Synchronous XMLHttpRequest on ..., así como tienes configurada tu llamada funciona sin problemas de mi lado, ¿Cuales son los pasos con los que obtienes ese mensaje? Saludos
    – g.4
    el 6 ene. 2022 a las 5:59

1 respuesta 1

0

Puedes probar algo así:

const [user, setUser] = useState({});

useEffect(() => {
  async function getData() {
    const response = await Axios.get(
      `http://localhost:8080/user/${userId}/detail`,
      {
        headers: {
          Authorization: accessToken,
        },
      }
    );
    setUser(response.data)
  }
  getData()
}, [accessToken, userId]);

En cuanto a si necesitas o no el useEffect, lo que está haciendo en estas condiciones es que se ejecuta una única vez cuando se monta el componente(cada vez que este se renderiza), y luego se ejecuta nuevamente lo que está dentro del useEffect cada vez que cambia accessToken o userId, ya que estos se encuentran dentro de lo que se conoce como array de dependencias.

Sabiendo eso espero puedas evaluar si es lo que necesitas para lo que estés desarrollando.

En cuanto a donde usar el async y el await, useEffect no permite poner async a la arrow function, una forma de resolverlo es crear adentro una función async que adentro tenga un await, carga los datos recibidos en tu variable de estado user y se cierra la función, en la próxima línea ejecutamos esa función.

2
  • Lamentablemente no funcionó, todavía sigue saliendo la advertencia, en realidad no afecta la funcionalidad de la app pero me parece curioso que no funcionara por que es la unica llamada que estoy haciendo en el componente.
    – kilex
    el 7 ene. 2022 a las 3:15
  • Tendrías q subir componente completo, o subirlo a sandbox completo o capaz pasar link a Github para poder probarlo.. Quitaste el async en la arrow function ni bien abre el useEffect? el 7 ene. 2022 a las 3:46

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.