Uncaught ReferenceError: GetListItems is not defined

Uncaught ReferenceError: GetListItems is not defined

我正在使用 React 处理 SPFx,我正在尝试使用 REST 调用获取包含超过 5000 个项目的共享点列表项目。

但是,当我这样做时,它会转到成功函数并检索指定的前 1000 个项目。但是在接下来的迭代中,在指定行弹出这个错误-

Uncaught ReferenceError: GetListItems is not defined

我做错了什么?请帮忙

public componentDidMount() {
  this.GetListItems();
}

public GetListItems() {
  var reactHandler = this;
  var response = response || []; // this variable is used for storing list items 
  var url = '${this.props.siteurl}/_api/web/lists/getbytitle('List_name')/items?$top=1000';     

   jquery.ajax({
    url: url,
    method: "GET",
    headers: {
      "Accept": "application/json; odata=verbose"
    },
    success: function(data) {
      console.log("Data ;", data.d.results);

      response = response.concat(data.d.results);
      console.log("Items are1;", response);

      if (data.d.__next) {
        url = data.d.__next;
        this.GetListItems(); // error in this line
        console.log("concat", this.response);
      } else {
        return response;
      }

      reactHandler.setState({
        items: response,
        filteredItems: response
      }, () => {
        console.log("Items are;", this.state.items);
      });
    },
    error: function(error) {
      // error handler code goes here
      console.log("error")
    }
  });
}

我直接用js测试代码

我对代码做了一些修改,供大家参考:

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script>
    $(function () {
      var url = `${_spPageContextInfo.siteAbsoluteUrl}/_api/web/lists/getbytitle('testn')/items?$top=1000`;
      GetListItems(url)
    })
    
     var response = response || [];
    function GetListItems(url) {
      
      $.ajax({
        url: url,
        method: "GET",
        headers: {
          "Accept": "application/json; odata=verbose"
        },
        success: function (data) {
          console.log("Data ;", data.d.results.length);

          response = response.concat(data.d.results);
          console.log("Items are1;", response);

          if (data.d.__next) {
            url = data.d.__next;
            GetListItems(url); // error in this line
            console.log("concat",response);
          } else {
            return response;
          }

          // reactHandler.setState({
          //   items: response,
          //   filteredItems: response
          // }, () => {
          //   console.log("Items are;", this.state.items);
          // });
        },
        error: function (error) {
          // error handler code goes here
          console.log("error")
        }
      })
    }
  </script>

测试结果: 更新: 更新代码:

this.state={
      Response:[]
    }
    var Response=this.state.Response;
        Response.concat(data.d.results);
        this.setState({Response})

终于知道哪里不对了!这是一个范围问题,因为我在成功函数中使用了 ES5 语法。我将其更改为 ES6,即,使用了箭头函数。这是我更新的代码-

public componentDidMount() {
                    var response = response || [];  // this variable is used for storing list items
                    var url = `${this.props.siteurl}/_api/web/lists/getbytitle('List_Name')/items?$top=1000`;
                    this.GetItems(response, url);
            
                }
        
    

public GetItems = (response, url) => {            
           
            jquery.ajax({
                url: url,
                method: "GET",
                headers: {
                    "Accept": "application/json; odata=verbose"
                },
    
    
                success: (data) => {
                    console.log("Data ;", data.d.results);    
                    response = response.concat(data.d.results);
                    console.log("Items are;", response);
                    if (data.d.__next) {
                        url = data.d.__next;
                        this.GetItems(response, url);
                        console.log("concat", response.length);
                    }
    
                    this.setState({
                        items: response,
                        filteredItems: response
    
                    }, () => {
                        console.log("Items are;", this.state.items);
                    });
                },
                error: function (error) {
                    // error handler code goes here
                    console.log("error")
                }
            });
    
    
        }