React工具遇到错误：RangeError：超出最大调用堆栈大小-尝试获取大量数据时

如何解决React工具遇到错误：RangeError：超出最大调用堆栈大小-尝试获取大量数据时

我有一个React应用，可显示产品列表。数据库中的产品总数超过12,000。

我的目标

当用户按名称过滤或更改单个页面上显示的产品数量时，我想在从服务器获取数据的同时显示一个Loading组件。

我的处决

组件的状态具有属性isFetching，该属性默认为false。 使用过滤器时，将调用函数setFilterBy，并通过使用setState将过滤器设置为当前filterBy并将isFetching设置为true。 setState的回调函数正在调用函数loadProducts。 loadProducts从服务器获取产品后，会将isFetching重置为false。

 setFilterBy = (filterBy) => {

      this.setState((prevState) => {

        if (filterBy.term || filterBy.limit) {
          filterBy.page = 0;
        }
        return {
          isFetching: true,filterBy: {
            ...prevState.filterBy,...filterBy,},};
      },this.loadProducts);
  };

loadProducts = async () => {
    const results = await ProductService.loadProducts(this.state.filterBy);

    if (results) {
      const { products,rowCount } = results;
      this.setState({ ...this.state,products,rowCount,isFetching: false });
    }
  };

正在通过isFetching属性有条件地呈现Loading组件。

render() {
const { products,isFetching } = this.state;

const listDisplay = !products ||  isFetching ? (
      <Loading />
    ) : (
      <ProductList products={products} />
    );

 return (
      <div className="product-page-container main-layout-container">
        <div className="product-top-bar">

          <ProductLimit setFilterBy={this.setFilterBy} />
          <ProductFilter
            filterBy={this.state.filterBy}
            setFilterBy={this.setFilterBy}
          />
        </div>

        {listDisplay}
      </div>
    );
}

现在通常它的速度足够快，甚至不显示加载组件，因此要检查它，我的网络速度变慢并且可以正常工作。 除非，我试图将页面限制设置为“全部”，这将从服务器上获取所有12000多种产品。

问题

当我将限制设置为“全部”时，出现错误消息：

Warning: React instrumentation encountered an error: RangeError: Maximum call stack size exceeded

我到处都是，找不到原因。
是否有人知道导致此问题的原因？