加载React JS组件数据时，jQuery滚动两次触发

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的超时时间。

无限滚动从页面底部刷新两次

代码如下：

import React from 'react';

class UsersBrowse extends React.Component {
  componentWillMount() {
    let x = this.props;
    let timeout;
    $(window).scroll(function(){
      clearTimeout(timeout);
      timeout = setTimeout(function(){
        if($(window).scrollTop() + $(window).height() == $(document).height()) {
          const {loadMore} = x;
          loadMore();
        }
      }, 200);
    });
  }

  render() {
    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;

已解决：D