ReactJs: Mehr Seitenumbruch Typ (append)

Question

Ich bin neu bei ReactJS und eine Sache, an der ich arbeite, ist Paginierung. ReactJS ist ein großartiges Werkzeug, um komplexe UI-Ansichten zu erstellen, aber manchmal ist das Einfachste das Schwierigste. Ich könnte es in jQuery tun, aber ich möchte es mit React tun.

Grundsätzlich möchte ich einen "Mehr laden" Stil der Seitenumbruch, wo Elemente an den Körper (wie ein News-Feed) angehängt werden. In meinem Code mache ich eine Ajax-Anfrage, um die Daten zu erhalten, sie in eine Statusvariable zu setzen und dann das DOM zu rendern. Ich habe dies erfolgreich mit nur 1 Seite von Daten getan, weil ich eine neue Variable für Elemente erstellt habe.

Grundsätzlich weiß ich, wenn die Person auf "Load More" geklickt hat und dann verwende ich eine neue Variable, um die Daten zu speichern. Hier ist die Funktion machen:

render: function() { 
    var markup = [], 
     nextMarkup = []; 

    if(this.state.hasSuccess) { 
     markup = Object.keys(this.state.listings).map(function(value){ 
      return (
       <div className="property__item" key={value}> 
        blablabla 
       </div> 
      ) 
     }, this) 

     if(this.state.newListings !== false) { 
      nextMarkup = Object.keys(this.state.newListings).map(function(value){ 
       return (
        <div className="property__item" key={value}> 
         blablabla 
        </div> 
       ) 
      }, this) 
     } 
    } else { 
     markup.push(<p key="1">No results</p>) 
    } 

    return (
     <div className="property__list--grid"> 
      { markup } 
      { nextMarkup } 
     </div> 
    ); 
} 

Wie Sie sehen können, bin ich den Code zu duplizieren, und ich konnte nicht einen Weg, es zu tun, die „React“ Stil. Ich möchte keine 10 Variablen erstellen, wenn der Benutzer noch 10 Mal auf "Mehr laden" klickt.

Wenn jemand helfen könnte, wäre das toll. Ich kann mir keine Lösung vorstellen, und sie verfolgt mich seit Tagen.

Vielen Dank.

Answer 1

Es muss keine neue Statusvariable pro "Ergebnisseite" erstellt werden. Es sieht für mich aus, dass Sie eine unendliche Scroll-Ergebnismenge erstellen und dass die onCallSuccessGetListings in Ihrer Komponente lebt.

Anstatt eine neue Variable für eine neue Ergebnisseite zu erstellen, hängen Sie neue Ergebnisse an die vorhandene Variable an. z.B.

onCallSuccessGetListings: function(data) { 
    var jsonData = JSON.parse(data); 

    this.setState({ 
     hasSuccess: jsonData.success, 
     listings: jsonData.success 
     ? this.state.listings.concat(jsonData.result) 
     : this.state.listings 
    }); 
}, 

Stellen Sie sicher stellen Sie Ihren Ausgangszustand { listings = [] } (https://facebook.github.io/react/docs/component-specs.html#getinitialstate) zu sein.

Der obige Code löst jedes Mal eine Aktualisierung Ihrer Komponente aus, wenn der Status festgelegt ist, und Sie können dann die Ergebnisse einfach durchlaufen. Ich würde auch in Betracht ziehen, die Art zu aktualisieren, wie Sie das state.hasSuccess-Flag verwenden. Ich denke, es sollte eher verwendet werden, um anzuzeigen, wenn ein Fehler aufgetreten ist. Hier wird eine überarbeitete() Methode machen:

render: function() { 
    var markup = []; 
     hasSuccess = this.state.hasSuccess, 
     listings = this.state.listings; 

    if(!hasSuccess) { 
     markup.push(<div>An error occurred.</div>); 
    } else if (listings.length > 0) { 
     markup = Object.keys(listings).map(function(value){ 
      return (
       <div className="property__item" key={value}> 
        blablabla 
       </div> 
      ) 
     }, this) 
    } else { 
     markup.push(<p key="1">No results</p>) 
    } 

    return (
     <div className="property__list--grid"> 
      { markup } 
     </div> 
    ); 
} 

Answer 2

This tutorial könnte jeder helfen, eine paginierte Liste zu implementieren in React. Es hat die Liste selbst und eine Schaltfläche More, um die nächste Teilmenge einer paginierten Liste von einem Backend abzurufen. Das Backend im Tutorial ist bereits vorhanden. Ich hoffe, es hilft jedem, der eine solche Funktionalität implementieren möchte.