Question

我的计划是在滚动并到达页面底部时加载数据。我使用JQuery滚动使其成为可能，如果没有数据显示（只是控制台记录数据），它工作正常。但是，如果我开始显示数据，滚动两次或其他东西发射两次，我不知道是什么。这是我的代码：

import React from 'react';

class UsersBrowse extends React.Component {
  render() {
    let x = this.props;
    $(window).unbind('scroll').scroll(function() {
      if($(window).scrollTop() + $(window).height() == $(document).height()) {
        const {loadMore, currentPage} = x;
        loadMore(currentPage);
      }
    });
    const {scanUserResult, loading} = this.props;
    console.log(this.props);
    return (
      <div>
        {scanUserResult ? scanUserResult.map(users => (
          <div key={users._id}>
            <div>{users._id}</div>
          </div>
        )):<img src={loading} height="100" width="100" />}
      </div>
    );
  }
}

export default UsersBrowse;

如果我只是控制台记录数据，但是当我在页面上显示数据时，代码可以正常工作：

加载第1页跳过第2页加载第3页跳过第4页加载第5页

我的期望是，它应该加载：

第1页第2页第3页第4页

如果我这样做，它会起作用：

import React from 'react';

class UsersBrowse extends React.Component {
  render() {
    const {scanUserResult, loading} = this.props;
    let x = this.props;
    $(window).unbind('scroll').scroll(function() {
      if($(window).scrollTop() + $(window).height() == $(document).height()) {
        const {loadMore} = x;
        loadMore();
      }
    });
    console.log(this.props);
    return (
      <div>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
        test<br/>
      </div>
      // <div>
      //   {scanUserResult ? scanUserResult.map(users => (
      //     <div key={users._id}>
      //       <div>{users._id}</div>
      //     </div>
      //   )):<img src={loading} height="100" width="100" />}
      // </div>
    );
  }
}

export default UsersBrowse;

有什么想法吗？谢谢

Answer 1

我认为这是因为$(window).scrollTop() + $(window).height() == $(document).height()有两次，所以它会触发两次。也许你可以为它设置一个标志。

static loading = true;
render() {
    let x = this.props;
    $(window).unbind('scroll').scroll(function() {
      if($(window).scrollTop() + $(window).height() == $(document).height() && loading == true) {
       loading = false;
        const {loadMore, currentPage} = x;
        loadMore(currentPage);
      }
    });
    const {scanUserResult, loading} = this.props;
    console.log(this.props);
    return (
      <div>
        {scanUserResult ? scanUserResult.map(users => (
          <div key={users._id}>
            <div>{users._id}</div>
          </div>
        )):<img src={loading} height="100" width="100" />}
      </div>
    );
  }

Answer 2

我的猜测（我需要查看整个代码以确认）是，当您的内容被渲染时，它会使您的页面变大（增加高度），当您的页面增长时，scroll事件将被解雇，使您的组件重新渲染（我需要检查您的代码以查看道具之间的关系等）并在控制台中记录事物。

你只需要更好地编排它，有时超时可能会有所帮助，或者某种“加载”状态，或者你可以“锁定”滚动事件直到组件重新渲染。

只是提示，在渲染上绑定事件不是一个好的模式。在这种情况下，您可以使用componentDidMount和componentWillUnmount。

Answer 3

最后通过在componentWillMount中添加它来对其进行排序，然后将超时设置为200ms。

Infinite scroll fired twice on refresh from the bottom of page

代码是这样的：

open -a /Applications/Firefox.app

已解决：D

加载反应js组件数据时，JQuery滚动两次

3 个答案: