0

buenas noches, quiero pedirles un consejo si no es mucha molestia.Estoy trabajando con React y al almacenar los valores que extraigo de una Api y guardarlos en el useState funciona de manera correcta, el problema viene al observar los cambios que se hagan en los objetos que trae dicha Api. La manera que tengo entendida de obervar los cambios es pasarle al useEffect el state que me almacena los datos de la api para que asi se renderie el componente cada que tenga cambios la Api, pero me genera muchas peticiones al back lo cual no es correcto, hay alguna mejor forma de hacer esto, o es que hay algo que no estoy haciendo bien?

const [productos, guardarProductos] = useState([]);

useEffect(() => {

    //query a la API
    const obtenerProductos = () => {
        let url = 'products'
        MethodGet(url)
        .then(res=>{
           guardarProductos(res.data.products)
        )
        .catch(error=>{
          console.log(error);
         )   
    }

    obtenerProductos();
  }, [productos]);


introducir la descripción de la imagen aquí

0

2 respuestas 2

2

Veo un problema en el código que compartes, la declaración de la función obtenerProductos(), parece que no es necesaria.

Puedes insertar el código de la petición dentro del hook useEffect sin esta declaración.

Por otro lado, parece que después en la ejecución de useEffect se esta llamando de forma recursiva a obtenerProductos(), esto puede ocasionar problemas.

Se puede configurar useEffect con el segundo argumento como un arreglo vacío, así le decimos a react que solo queremos llamar a este efecto, cuando el componente este acoplado (mounted). De esta forma evitarás el waterfall de llamadas a la API, esto se conoce como skip effects.

Luego, los cambios de estado los puedes manejar en otra instancia hook useEffect, como lo intentaste en tu código, agregando un watch al hook para la variable productos, en el segundo argumento.

Sugiero lo siguiente:

import React, { useState, useEffect } from "react";

const PeticionAPI = () => {
  const [productos, guardarProductos] = useState([]);

  useEffect(() => {
    
        //query a la API
            let url = "url"
            fetch(url, {
                headers: {
                    Accept: 'application/json',
                }
            })
            .then((response) => response.json())
            .then(res=>{
                console.log(res.results.length)
                guardarProductos(res.results);
            })
            .catch(error=>{
              console.log(error);
            })   
        }, []);
    
  return ( <div>
    {productos.map((item, i) => (
      <div key={i}>
        {item.name}
      </div>
    ))}
  </div>)
};

En cuanto al return, estoy suponiendo que [productos] tiene una llave name, debes verificar las llaves de tu lado.

Espero que esta respuesta sea de ayuda.

Saludos

0
const [productos, guardarProductos] = useState([]);

useEffect(() => {

    //query a la API
    const obtenerProductos = () => {
        let url = 'products'
        MethodGet(url)
        .then(res=>{
           guardarProductos(res.data.products)
        )
        .catch(error=>{
          console.log(error);
         )   
    }

    obtenerProductos();
  }, []);

Quiero decirte que, por lógica (cotidiana diré), uno solo pide los datos (y lo más normal es) una sola vez. Es decir, al cargar la página, quitar las dependencias evita volver a pedir los datos una y otra vez, y si cambias tus datos, ellos mutarán automáticamente.

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.