Profondeur de mise à jour maximale dépassée. React limite le nombre de mises à jour imbriquées pour éviter les boucles infinies. question

Question

J'essaie d'utiliser la bibliothèque React-Table mais je rencontre ce problème et je ne sais pas comment le résoudre.

Erreur non détectée : profondeur de mise à jour maximale dépassée. Cela peut se produire lorsqu'un composant appelle setState à plusieurs reprises dans composantWillUpdate ou composantDidUpdate. React limite le nombre de mises à jour imbriquées pour éviter les boucles infinies.

export const GetProducts=async()=>{
    try {
        const response=await axios({
            url:`${baseUrl}/products`,
            method:"GET"
          })

          // console.log(response.data.products)
          return await response.data.products
    } catch (error) {
        console.log(error.response)
    }
}

J'essaie ceci :

const TablaStock = () => {
  const [data, setData] = useState([]);


  useEffect(() => {
    const getProducts = async () => {
      const response = await GetProducts();
      setData(response.products);
    };

    getProducts();
  }, [data]);


  const columns =useMemo(() =>  [
    { Header:"CODIGO",
      accessor: "codigo"
     },
    { Header:"PRENDA",
      accessor: "prenda" },
    { Header:"MARCA",
      accessor: "marca" },
    { Header:"CATEGORIA",
      accessor: "categoria" },
    { Header:"TALLE",
      accessor: "" },
    { Header:"CLIENTE",
      accessor: "cliente" },
    { Header:"FECHA DE INGRESO",
      accessor: "fechaIngreso" },
    { Header:"PRECIO DE VENTA",
      accessor: "precioVenta" },
    { Header:"GANANCIA CLIENTE",
      accessor: "" },
    { Header:"GANCANIA FERNANDEZ SHOP",
      accessor: "",
      Cell:({})},
    { Header:"ESTADO",
      accessor: "estado" },
    { Header:"TIEMPO EN VENTA",
      accessor: "tiempoEnVenta" },
  ]);

  const table=useTable({
    columns,
    data })

   

  return (
  <>
  </>
  );
};

export default TablaStock;

Answer 1

Vous entrez dans une boucle infinie avec Effect car vous obtenez les "données" du serveur, mais vous effectuez également un nouveau rendu via le changement de cette variable. Supprimez les "données" de la liste des dépendances de useEffect :

useEffect(() => {
    const getProducts = async () => {
      const response = await GetProducts();
      setData(response.products);
    };

    getProducts();
  }, []); // Remove the 'data' dependency

J'espère que cela aide.

Answer 2

J'ai résolu ce problème en ajoutant le code suivant :

const table = useTable({
  columns,
  data,
  autoResetHiddenColumns: false, //  <-- stops the rerendering
  autoResetSortBy: false, //  <-- stops the rerendering
});