React - Rendern und Iterieren von Komponenten

Question

Ich wiederhole Array von Objekten mithilfe der ES6-Kartenfunktion und aktualisiere sie auf <li> Listenelemente. Das Protokoll wird korrekt gedruckt. Die Listenelemente werden jedoch nicht in der Benutzeroberfläche angezeigt.

Code:

renderListItems() { 
    var GameScore = Parse.Object.extend("Test"); 
    var query = new Parse.Query(GameScore); 
    query.find({ 
     success: function (results) { 
      console.log("Successfully retrieved " + results.length); 
      return results.map((task, i) => { 
       console.log("-> " + task.get("name")); 
       return (<li key={i}> 
         {task.get("name")} 
        </li> 
       ); 
      }); 
     }, 
     error: function (error) { 
      console.log("Error: " + error.code + " " + error.message); 
     } 
    }); 
} 

Hier ist meine Render-Methode, ich rufe diese renderListItems Methode in 'macht'

render() { 
    return (

      <div> 
       <ul> 
        {this.renderListItems()} 
       </ul> 
      </div> 
    ); 
} 

Answer 1

Die Antwort ist einfach: Ihre renderListItems() Methode nicht zurück überhaupt etwas.

Datenabruflogik sollte NICHT Teil der Rendermethode sein. Sie sollten diese ganze Logik zu der Lifecycle-Methode componentDidMount() extrahieren, wenn die Daten nach dem Mounten der Komponente abgerufen werden sollen. Andernfalls müssen Sie eine Schaltfläche erstellen, die beim Klicken eine Funktion zum Abrufen von Daten aufruft.

Sie können die Daten in der Komponente Zustand speichern und tun einfach das folgende für renderListItems():

renderListItems() { 
    return this.state.results.map((task, i) => { 
     console.log("-> " + task.get("name")); 
     return (<li key={i}> 
       {task.get("name")} 
      </li> 
    ); 
    }); 
} 

Als Randbemerkung, würde ich nicht die Array-Index für den Schlüssel prop jedes <li> verwenden. Sie können darüber googeln. Stattdessen würde ich eine eindeutige Kennung verwenden, wie die task.id (falls es eine gibt).