JQuery scroll Feuer zweimal beim Laden reagiert js Komponentendaten

Question

Mein Plan ist, Daten zu laden, wenn Sie die unten auf der Seite bewegen und erreichen. Ich benutze JQuery Scroll, um es möglich zu machen, und es funktioniert gut, wenn keine Daten angezeigt werden (nur die Daten der Konsole protokollieren). Aber wenn ich anfange, Daten anzuzeigen, blitzt der Scroll zweimal oder etwas anderes zweimal, was ich nicht weiß, was. Hier ist mein Code:

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; 

Der Code funktioniert gut, wenn ich nur die Daten-Konsole anmelden, aber wenn ich es auf der Seite angezeigt werden überspringt es wie:

Lasten Seite 1 Seite 2 Lasten überspringen Seite 3 Seite 4 lädt Seite 5 überspringen

Meine Erwartung ist, sollte es laden:

page1 page2 pa ge3 page4

Es funktioniert, wenn ich es wie folgt tun:

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; 

Jede Idee? Danke

Answer 1

Ich denke, es ist, weil es zwei mal $(window).scrollTop() + $(window).height() == $(document).height(), so dass es zweimal auslösen. vielleicht kannst du eine Fahne dafür setzen.

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

Meine Vermutung (ich muß den gesamten Code sehen, um zu bestätigen), dass, wenn Ihr Inhalt gerendert wird, ist es Ihre Seite größer macht (die Höhe zu erhöhen), wenn Ihre Seite wächst, die scroll Veranstaltung wird gefeuert, wodurch deine Komponente neu gerendert wird (ich müsste deinen Code überprüfen, um die Beziehung zwischen deinen Requisiten usw. zu sehen) und Dinge in deiner Konsole protokollieren.

Sie müssen es nur besser orchestrieren, manchmal hilft ein Zeitlimit oder eine Art "Ladezustand", oder Sie können das Bildlaufereignis "sperren", bis die Komponente neu gerendert wird.

Nur ein Tipp, es ist kein gutes Muster Ereignisse zu binden, auf machen. Sie können componentDidMount und componentWillUnmount in diesem Fall verwendet werden.

Answer 3

sortiert schließlich durch Zugabe es in componentWillMount aus und setzen dann ein Timeout von 200 ms.

Infinite scroll fired twice on refresh from the bottom of page

-Code lautet wie folgt:

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; 

Entschlossen: D