Question

这是我的明信片页面（仅特定部分），我在其中显示从获取的Api中获取的数据。

fetchMoreData(){
    this.setState({
        index: this.state.index + 5 
    })
}
    componentDidMount(){
        window.addEventListener('scroll', this.onScroll);
        this.fetchMoreData();
    }

    onScroll = () => {
        $(window).scroll(function() {   
            if($(window).scrollTop() + $(window).height() == $(document).height()) {
                this.fetchMoreData();
            }
         });
       }

由于我的API是测试API，因此我提取了我的帖子页面中的所有数据，然后将其传递给我的明信片页面，以便对此this.state.index进行更改后，它会显示更多项目。

我面临的问题是我收到一个错误，指出this.fetchMoreData（）不是函数。随时指出任何错误。

Answer 1

使fetchMoreData像onScroll一样具有箭头功能

fetchMoreData = () => {
  ...
}

Answer 2

onScroll = () => {
    $(window).scroll(() => {
        if ($(window).scrollTop() + $(window).height() == $(document).height()) {
            this.fetchMoreData();
        }
    });
}

如果您使用function，它将在window对象的上下文中调用（对于您的情况）。您可以使用闭包来保存父上下文，如下所示：

onScroll = () => {
    const that = this;

    $(window).scroll(function () {
        if ($(window).scrollTop() + $(window).height() == $(document).height()) {
            that.fetchMoreData();
        }
    });
};

但是箭头函数将this的参数绑定到父范围的参数，因此this将链接到您的组件类。与function相比，这是一种优雅且容易的解决方案，尤其是您已经在组件中使用了箭头功能。

Answer 3

您可以使用es6箭头函数，因为您需要将此值从函数绑定到我们的类。因此$(window).scroll(function() {无效。所以你可以这样

$(window).scroll(() => {
        if ($(window).scrollTop() + $(window).height() == $(document).height()) {
            this.fetchMoreData();
        }
    });

在Reactjs中滚动到底部时加载更多

3 个答案: