Question 54584 in Javascript Question posted in
A very good W3school tutorial can be found here.

Maximum update depth exceeded. React limits the number of nested updates to prevent infinite loops. PROBLEM – Javascript

I’m trying to usereact-table library but I’m having this problem and I don’t know how to solve it.

Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

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)
    }
}

I’m trying this:


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;
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I solved it by adding the following code:

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

  2. 0

    You useEffect going into infinite loop, because you geting "data" from the server, but also rerendering by the cahnge of this variable.
    Remove "data" from the dependency list of useEffect:

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

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

    I hope it helps.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search