使用react-table库触发Maximum update depth exceeded错误，求解决方案

报错信息 #

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.

问题根源 #

你的useEffect依赖数组里包含了data状态，每次调用setData更新data后，useEffect会被重新触发，再次发起请求并更新data，形成无限循环。

另外还有两处细节问题：

• GetProducts函数已经直接返回了response.data.products，组件里不需要再取response.products，直接赋值即可。
• columns用useMemo包裹时没加依赖数组，会导致每次渲染都重新创建列配置，影响性能。

修正后的组件代码 #

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

  useEffect(() => {
    const getProducts = async () => {
      // GetProducts已经返回products数组，直接接收即可
      const products = await GetProducts();
      setData(products);
    };

    getProducts();
    // 依赖数组改为空，只在组件挂载时请求一次数据
  }, []);

  // useMemo加空依赖数组，确保列配置只初始化一次
  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:"GANANCIA FERNANDEZ SHOP", accessor: "", Cell: () => <span>-</span> }, // 补充空Cell的默认渲染
    { Header:"ESTADO", accessor: "estado" },
    { Header:"TIEMPO EN VENTA", accessor: "tiempoEnVenta" },
  ], []);

  const table = useTable({ columns, data });

  // 补充react-table的基础渲染代码
  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = table;

  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map(headerGroup => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps()}>{column.render('Header')}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map(row => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map(cell => (
                <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
              ))}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
};

export default TablaStock;

接口代码无需修改（确认返回值正确即可） #

export const GetProducts = async () => {
    try {
        const response = await axios({
            url:`${baseUrl}/products`,
            method:"GET"
        })
        return response.data.products; // 这里已经返回products数组，无需await
    } catch (error) {
        console.log(error.response)
    }
}

内容的提问来源于stack exchange，提问作者martinasorialanzi