React - Rendu et itération des composants

Question

Je réitère un tableau d'objets en utilisant la fonction de carte ES6 et je le mets à jour en <li> éléments de liste. Le journal imprime correctement. Mais les éléments de la liste n'apparaissent pas dans l'interface utilisateur.

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); 
     } 
    }); 
} 

Voici ma méthode render, j'appelle cette méthode renderListItems en 'rendre'

render() { 
    return (

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

Answer 1

La réponse est simple: votre méthode renderListItems() ne retourne pas rien du tout.

La logique de récupération de données NE DOIT PAS faire partie de la méthode de rendu. Vous devriez extraire toute cette logique à peut-être la méthode du cycle de vie componentDidMount() si vous souhaitez que les données soient récupérées après le montage du composant. Sinon, vous devrez créer un bouton qui, en cliquant sur, appellera une fonction pour récupérer des données.

Vous pouvez stocker les données dans l'état des composants et simplement faire ce qui suit pour renderListItems():

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

Comme une note de côté, je ne voudrais pas utiliser l'index de tableau pour le pilier clé de chaque <li>. Vous pouvez google à ce sujet. Au lieu de cela, j'utiliserais un identifiant unique, comme le task.id (s'il y en a un).