Comment produire une matrice avec les touches de mon fichier HTML à partir de la fonction de promesse à l'aide de React

Vous pouvez commencer à rechercher vos données dans composantwillmount code> et enregistrement de données dans le champ composant (par exemple livres code>). Ensuite, vous pouvez vérifier ce champ dans rendu code> et sur la base de sa valeur renvoyer un bout ou une matrice.

{
  this.books && this.books.length
  ? <your-array books="this.books"></your-array>
  : <span>No books</span>
}

Cela fonctionne mieux avec l'état. Déclarez un état pour votre composant et votre système d'appels après avoir chargé les données. Dans la méthode de rendu, il suffit de dire {this.state.book} et réagirez à nouveau le composant lorsque l'état a été mis à jour.

Nous ne devrions pas jouer avec async / attendre ici et retarder le rendu. Le rendu doit être rapide et rapide et nous devons nous attendre à ce que les données n'arrivent pas encore lorsque nous rendant la page. P>

Donc, pour une victoire rapide,: P>

export default class booksComponent extends Component{

state = {
  books: null,   // we start with not having a books, later it's an array of books
}

getBook() {

   // ...
   // instead of return(newArray) inside your method, say:
   this.setState({books: newArray});
}

componentDidMount() {
   if (this.state.books === null) {
      this.getBooks();  // here we start the accessing the db
   }
}

render(){
  return(
    <div>
         <button/>
    <div>
     ------
     {this.state.books && this.state.books.map((book) => {
       return <p key={book.bookName}>{book.bookName} by {book.author}</p>
     })}
     </div>
 </div>
  )};
};

Essayez ceci xxx