Javascript Reactjs:无限滚动不工作

我试图在我的web应用程序中添加无限滚动。当用户向下滚动页面时，必须有一个API调用来加载现有数据下的数据。因此，这里的问题是当我到达网页底部时，API没有被调用

import React from "react";
import { Link } from 'react-router-dom';
import axios from 'axios';

 class InfiniteData extends React.Component{
constructor(props){
super(props);
this.state={olddata: [],newData: [], requestSent: false}
}
componentDidMount(){
  window.addEventListener('scroll', this.handleOnScroll);
  this.doQuery();
}

componentWillUnmount() {
  window.removeEventListener('scroll', this.handleOnScroll);
}

doQuery() {
  console.log("indoquery");
  axios.get("https://jsonplaceholder.typicode.com/posts")
  .then( res=>
  this.setState({
    olddata: res.data,
    newData: this.state.olddata.concat(this.state.olddata)
  })
  )
  .catch(console.log("error"))
}
handleOnScroll(){
  var scrollTop = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
  var scrollHeight = (document.documentElement && document.documentElement.scrollHeight) || document.body.scrollHeight;
  var clientHeight = document.documentElement.clientHeight || window.innerHeight;
  var scrolledToBottom = Math.ceil(scrollTop + clientHeight) >= scrollHeight;

  if (scrolledToBottom) {
     console.log("At bottom");
    // enumerate a slow query
     setTimeout(this.doQuery, 2000);
  }
}
  render()
  {
    return (
    <div>
      <div className="data-container">
        {this.state.newData && this.state.newData.map((dat,i)=>
          <div key={i}>
            {dat.body}
          </div>
        )}
      </div>
    </div>
    );
  }
}

export default InfiniteData;

从“React”导入React；
从'react router dom'导入{Link}；
从“axios”导入axios；
类InfiniteData扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={olddata:[]，newData:[]，requestSent:false}
}
componentDidMount（）{
window.addEventListener（'scroll'，this.handleOnScroll）；
this.doQuery（）；
}
组件将卸载（）{
window.removeEventListener（'scroll'，this.handleOnScroll）；
}
doQuery（）{
console.log（“indoquery”）；
axios.get（“https://jsonplaceholder.typicode.com/posts")
。然后（res=>
这是我的国家({
olddata:res.data，
newData:this.state.olddata.concat（this.state.olddata）
})
)
.catch（console.log（“错误”））
}
手卷{
var scrollTop=（document.documentElement&&document.documentElement.scrollTop）| document.body.scrollTop；
var scrollHeight=（document.documentElement&&document.documentElement.scrollHeight）| document.body.scrollHeight；
var clientHeight=document.documentElement.clientHeight | | window.innerHeight；
var scrolledToBottom=Math.ceil（scrollTop+clientHeight）>=scrollHeight；
如果（滚动到工具栏）{
控制台日志（“在底部”）；
//枚举一个慢查询
setTimeout（this.doQuery，2000）；
}
}
render（）
{
返回(
{this.state.newData&&this.state.newData.map（（dat，i）=>
{dat.body}
)}
);
}
}
导出默认无限数据；

以下内容应该可以使用

import React from "react";

function doQuery() {
  console.log("indoquery");
  // Do something here
}
class InfiniteData extends React.Component{
    constructor(props){
        super(props);
        this.state={olddata: [],newData: [], requestSent: false}
    }
    componentDidMount(){
        window.addEventListener('scroll', this.handleOnScroll);
        doQuery();
    }

    componentWillUnmount() {
        window.removeEventListener('scroll', this.handleOnScroll);
    }


    handleOnScroll(){
        // ..... 
       if (scrolledToBottom) {
           setTimeout(function () {doQuery()}, 2000);
       }
    }
    render() {
        return (
           <div>

           </div>
        );
    }
}

export default InfiniteData;

从“React”导入React；
函数doQuery（）{
console.log（“indoquery”）；
//在这里做点什么
}
类InfiniteData扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={olddata:[]，newData:[]，requestSent:false}
}
componentDidMount（）{
window.addEventListener（'scroll'，this.handleOnScroll）；
doQuery（）；
}
组件将卸载（）{
window.removeEventListener（'scroll'，this.handleOnScroll）；
}
手卷{
// ..... 
如果（滚动到工具栏）{
setTimeout（函数（）{doQuery（）}，2000）；
}
}
render（）{
返回(
);
}
}
导出默认无限数据；

请注意，我删除了一些代码，以使其紧凑，并使您更容易理解问题所在。基本上，修复程序是定义doQuery函数的地方，以及如何将该函数传递给setTimeout，下面的操作应该是有效的

import React from "react";

function doQuery() {
  console.log("indoquery");
  // Do something here
}
class InfiniteData extends React.Component{
    constructor(props){
        super(props);
        this.state={olddata: [],newData: [], requestSent: false}
    }
    componentDidMount(){
        window.addEventListener('scroll', this.handleOnScroll);
        doQuery();
    }

    componentWillUnmount() {
        window.removeEventListener('scroll', this.handleOnScroll);
    }


    handleOnScroll(){
        // ..... 
       if (scrolledToBottom) {
           setTimeout(function () {doQuery()}, 2000);
       }
    }
    render() {
        return (
           <div>

           </div>
        );
    }
}

export default InfiniteData;

从“React”导入React；
函数doQuery（）{
console.log（“indoquery”）；
//在这里做点什么
}
类InfiniteData扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={olddata:[]，newData:[]，requestSent:false}
}
componentDidMount（）{
window.addEventListener（'scroll'，this.handleOnScroll）；
doQuery（）；
}
组件将卸载（）{
window.removeEventListener（'scroll'，this.handleOnScroll）；
}
手卷{
// ..... 
如果（滚动到工具栏）{
setTimeout（函数（）{doQuery（）}，2000）；
}
}
render（）{
返回(
);
}
}
导出默认无限数据；

---

请注意，我删除了一些代码，以使其紧凑，并使您更容易理解问题所在。基本上，修复方法是定义doQuery函数以及如何将该函数传递给setTimeout。实际上，这只是一个未正确绑定

此
的模糊情况：以下行使用
窗口
调用
handleOnScroll
（非InfiniteData组件实例）作为
此
：

window.addEventListener('scroll', this.handleOnScroll);

然后，您的
setTimeout
调用正在尝试调用
this.doQuery
，它是
未定义的，因为
窗口.doQuery
不存在

如果您为EventListener正确绑定了
this
，那么应该可以这样做：要么更改为
window.addEventListener（'scroll'，this.handleOnScroll.bind（this））componentDidMount
中添加code>，或在
构造函数中添加以下行，以使其全面绑定：

this.handleOnScroll = this.handleOnScroll.bind(this)


注意：这不是您遇到的问题，但是在
setState
调用中要小心--您的意思是使用
newData:this.state.olddata.concat（res.data）
？（将
res.data
传递给
concat
调用）
这实际上只是未正确绑定
This
的一个模糊情况：以下行使用
窗口
（非无限数据组件实例）作为
This
调用
handleOnScroll
：

window.addEventListener('scroll', this.handleOnScroll);

然后，您的
setTimeout
调用正在尝试调用
this.doQuery
，它是
未定义的，因为
窗口.doQuery
不存在

如果您为EventListener正确绑定了
this
，那么应该可以这样做：要么更改为
window.addEventListener（'scroll'，this.handleOnScroll.bind（this））componentDidMount
中添加code>，或在
构造函数中添加以下行，以使其全面绑定：

this.handleOnScroll = this.handleOnScroll.bind(this)


注意：这不是您遇到的问题，但是在
setState
调用中要小心--您的意思是使用
newData:this.state.olddata.concat（res.data）
？（将
res.data
传递给
concat
调用）
正如Daniel Thompson所说的，问题是您没有绑定它。详细说明：当eventListener调用函数
时，此
将不会绑定到您的组件，而是绑定到
窗口

在事件侦听器中绑定
此
将解决问题