Javascript 如何使用React从promise函数向我的html文件输出带有键的数组

我有一些firebase数据库，标签是“bookName”和“author”。 如何从函数“getBook”渲染数组

---

但是如何将这些信息放入render（）？

您可以开始在

组件中提取数据，然后将数据装入
方法并保存在组件字段中（例如
书籍
）。然后您可以在
render
中检查此字段，并根据其值返回一些存根或数组

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

{
this.books&&this.books.length
? 
：没有书
}

您应该通过
setState
（最简单的方法）设置
books
字段来通知组件再次渲染。
您可以开始在
componentWillMount
方法中提取数据，并在组件字段中保存数据（例如
books
）。然后您可以在
render
中检查此字段，并根据其值返回一些存根或数组

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

{
this.books&&this.books.length
? 
：没有书
}

您应该通过
setState
（最简单的方法）设置
books
字段，以通知组件再次渲染。
它最适合于状态。声明组件的状态，并在加载数据后调用setState。在render方法中，只需说{this.state.book}并在状态更新后重新呈现组件

我们不应该在这里使用async/Wait并延迟渲染。渲染必须快速，并且我们必须期望在渲染页面时数据尚未到达

所以，为了快速获胜：

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

导出默认类组件扩展组件{
状态={
books:null，//我们先没有一本书，然后是一个书数组
}
getBook（）{
// ...
//不要在方法中返回（newArray），而是说：
this.setState（{books:newArray}）；
}
componentDidMount（）{
if（this.state.books==null）{
this.getBooks（）；//这里我们开始访问数据库
}
}
render（）{
返回(
------
{this.state.books&&this.state.books.map（（book）=>{
通过{book.author}返回
{book.bookName}
})}
)};
};
它最适合状态。声明组件的状态，并在加载数据后调用setState。在render方法中，只需说{this.state.book}并在状态更新后重新呈现组件

我们不应该在这里使用async/Wait并延迟渲染。渲染必须快速，并且我们必须期望在渲染页面时数据尚未到达

所以，为了快速获胜：

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

导出默认类组件扩展组件{
状态={
books:null，//我们先没有一本书，然后是一个书数组
}
getBook（）{
// ...
//不要在方法中返回（newArray），而是说：
this.setState（{books:newArray}）；
}
componentDidMount（）{
if（this.state.books==null）{
this.getBooks（）；//这里我们开始访问数据库
}
}
render（）{
返回(
------
{this.state.books&&this.state.books.map（（book）=>{
通过{book.author}返回
{book.bookName}
})}
)};
};
试试这个

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>

  )};
};

import React，{Component}来自'React'；
从“../firebase/firebase.js”导入firebase；
导出默认类组件扩展组件{
建造师（道具）{
超级（道具）
此.state={
书籍：[]
}
this.getBook=this.getBook.bind（this）；
}
componentDidMount（）{
这个.getBook（）；
}
getBook（）{
常量newArray=[]；
const selfThis=this；
console.log（“我正在工作”）
const db=firebase.firestore（）；
数据库设置({
时间戳：对
});
db.collection（“LibraryDB”）。其中（“用户”、“=”，
firebase.auth（）.currentUser.uid）
.get（）
.then（函数（querySnapshot）{
querySnapshot.forEach（函数（doc）{
console.log（doc.id，=>，doc.data（））；
newArray.push（doc.data（））；
});
selfThis.setState({
书籍：新阵列
})
})
.catch（函数（错误）{
log（“获取文档时出错：”，错误）；
});
};
render（）{
返回(
------
作者
书名
{this.state.books.map（book=>
{book.author}
{book.bookName}
)}
)};
};
试试这个

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>

  )};
};

import React，{Component}来自'React'；
从“../firebase/firebase.js”导入firebase；
导出默认类组件扩展组件{
建造师（道具）{
超级（道具）
此.state={
书籍：[]
}
this.getBook=this.getBook.bind（this）；
}
componentDidMount（）{
这个.getBook（）；
}
getBook（）{
常量newArray=[]；
const selfThis=this；
console.log（“我正在工作”）
const db=firebase.firestore（）；
数据库设置({
时间戳：对
});
db.collection（“LibraryDB”）。其中（“用户”、“=”，
firebase.auth（）.currentUser.uid）
.get（）
.then（函数（querySnapshot）{
querySnapshot.forEach（函数（doc）{
console.log（doc.id，=>，doc.data（））；
newArray.push（doc.data（））；
});
selfThis.setState({
书籍：新阵列
})
})
.catch（函数（错误）{
log（“获取文档时出错：”，错误）；
});
};
render（）{
返回(
------
作者
书名
{this.state.books.map（book=>
{book.author}
{book.bookName}
)}
)};
};
为什么不将基础数据保存在状态和