Как вывести массив с ключами в мой HTML-файл из функции обещания, используя React

Question

У меня есть база данных firebase с тэгами "bookName" и "author". Как я могу сделать массив из функции "getBook"?

import React, {Component} from 'react';
import firebase from '../firebase/firebase.js';

export default class booksComponent extends Component{

getBook(){
  const newArray = [];
  console.log("i am working")
  const db = firebase.firestore();
  db.settings({
     timestampsInSnapshots: true
  });
  db.collection("LibraryDB").where("user", "==",  
     firebase.auth().currentUser.uid)
    .get()
    .then(function(querySnapshot) {
        querySnapshot.forEach(function(doc) {
            console.log(doc.id, " => ", doc.data());
            newArray.push(doc.data());
        });
        return(newArray);
    })
    .catch(function(error) {
        console.log("Error getting documents: ", error);
    });
};
render(){
  return(
    <div>
         <button/>
    <div>
     ------
     {this.getBook()}
     </div>
 </div>
  )};
};

В консоли вывод выглядит так:

[{author: "Ernest Hemingway", bookName: "Fiesta", user: 
"eZGZbRijz6RF8FkMhngiE9FAnf63"},
{author: "J. R. R. Tolkien", bookName: "LOTR", user: 
"eZGZbRijz6RF8FkMhngiE9FAnf63"},
{author: "Ernest Hemingway", bookName: "The Old Man and Sea", user: 
"eZGZbRijz6RF8FkMhngiE9FAnf63"}]

Но как поместить эту информацию в render ()?

Answer 1

Лучше всего работает с государством. Объявите состояние для вашего компонента и вызовите setState после того, как вы загрузили данные. В методе рендеринга просто скажите {this.state.book} и реагируйте повторно на рендеринг компонента, когда состояние будет обновлено.

Мы не должны здесь играть с async / await и откладывать рендеринг. Рендеринг должен быть быстрым и быстрым, и мы должны ожидать, что данные еще не поступили, когда мы рендерим страницу.

Итак, для быстрого выигрыша:

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

Answer 2

Попробуйте это

import React, {Component} from 'react';
import firebase from '../firebase/firebase.js';

export default class BooksComponent extends Component{
  constructor(props) {
    super(props)
    this.state = {
      books: []
    }
    this.getBook = this.getBook.bind(this);
  }
  componentDidMount() {
    this.getBook();
  }
  getBook(){
    const newArray = [];
    const selfThis = this;
    console.log("i am working")
    const db = firebase.firestore();
    db.settings({
      timestampsInSnapshots: true
    });
    db.collection("LibraryDB").where("user", "==",  
      firebase.auth().currentUser.uid)
      .get()
      .then(function(querySnapshot) {
          querySnapshot.forEach(function(doc) {
              console.log(doc.id, " => ", doc.data());
              newArray.push(doc.data());
          });
          selfThis.setState({
            books: newArray
          })
      })
      .catch(function(error) {
          console.log("Error getting documents: ", error);
      });
  };
  render(){

    return(
      <div>

        <div>
            <button onClick={this.getBook}/>
        <div>
        ------
        <table>
          <tr>
            <th>Author</th>
            <th>Book Name</th>
          </tr>
            {this.state.books.map(book => <tr key={book.user}>
              <td>{book.author}</td>
              <td>{book.bookName}</td>
            </tr>)}
          </table>
        </div>

  )};
};

Answer 3

Вы можете начать выборку ваших данных методом componentWillMount и сохранить данные в поле компонента (например, books). Затем вы можете проверить это поле в render и, основываясь на его значении, вернуть заглушку или массив.

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

Вы должны установить поле books через setState (самый простой способ), чтобы уведомить компонент о рендеринге снова.