Kedalaman kemas kini maksimum melebihi. React mengehadkan bilangan kemas kini bersarang untuk mengelakkan gelung tak terhingga. soalan

Question

Saya cuba menggunakan perpustakaan jadual tindak balas tetapi saya menghadapi masalah ini dan saya tidak tahu bagaimana untuk membetulkannya.

Ralat Tidak Ditangkap: Kedalaman kemas kini maksimum melebihi. Ini boleh berlaku apabila komponen memanggil setState berulang kali dalam componentWillUpdate atau componentDidUpdate. React mengehadkan bilangan kemas kini bersarang untuk mengelakkan gelung tak terhingga.

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

Saya sedang mencuba ini:

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

Anda memasuki gelung tak terhingga dengan Effect kerana anda mendapat "data" daripada pelayan, tetapi juga memaparkan semula melalui cahnge pembolehubah itu. Alih keluar "data" daripada senarai kebergantungan useEffect:

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

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

Semoga membantu.

Answer 2

Saya menyelesaikan masalah ini dengan menambah kod berikut:

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