ReactJs-无法一次显示所有数据。获取数据的循环通过逐个重新渲染自动运行，并在最后一个数据集停止

我的代码如下：

    import React, {
  Component,
  useState,
  useEffect
} from 'react';
import './App.css';
import {
  Card,
  CardImg,
  CardText,
  CardBody,
  CardTitle,
  CardSubtitle,
  Button
} from 'reactstrap';
import Image from 'react-image-resizer';
import * as firebase from 'firebase';


class App extends Component {

  constructor(props) {
    super(props);
    this.state = {

    };
  }


   async getOrderbookData() {
      try{
       var clientArray = ['Client1', 'Client2', 'Client3', 'Client4', 
                        'Client5', 'Client6', 'Client7'];
    for (var i=0; i<clientArray.length; i++) {
    const db = firebase.firestore();
    await db.collection('Orderbook').get().then((querySnapshot) => {
      var orderbooks = []
      var orderbook = []     
         querySnapshot.forEach(doc => {
            orderbooks.push(doc.data())
              console.log('THISS'+ orderbooks)    
      });
       orderbook = orderbooks[i].body
       console.log('i value:' + i);

      this.setState({
          orderbook: orderbook
      })
    });
   }
    }catch (err) {
       return "Error:" + err
   }
  }

  async componentDidMount() {

    this.getMarginData()

    this.getOrderbookData()

   }



  render() {
    return ( 
      <div className = "App" >

          <Image src={ require('./investsaathilogo.png')} 
          height = {100} width = {100}/>

        <h2> Orderbook Data </h2> 

              <h5 className="container"> 
          {
            console.log('ORDERBOOKNOW' + this.state.orderbook),

        this.state.orderbook && this.state.orderbook.map((order, key) =>
          <div key={order + key}> 

          <li>BuySell: {order.BuySell}</li>

        </div> 

         )     
         }
             </h5> 

            </div>
        );
      }
     }

    export default App;

import-React{
组成部分，
useState，
使用效果
}从"反应",；
导入“/App.css”；
进口{
卡片
卡迪姆，
卡片文本，
名片夹，
名片，
小标题:，
按钮
}来自“反应带”；
从“react Image resizer”导入图像；
从“firebase”导入*作为firebase；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
};
}
异步getOrderbookData（）{
试一试{
var clientArray=['Client1'、'Client2'、'Client3'、'Client4'，
'客户5'、'客户6'、'客户7']；
对于（var i=0；i{
var orderbooks=[]
var orderbook=[]
querySnapshot.forEach（doc=>{
orderbooks.push（doc.data（））
console.log（'this'+订单簿）
});
订单簿=订单簿[i]。正文
console.log（'i值：'+i）；
这是我的国家({
订单簿：订单簿
})
});
}
}捕捉（错误）{
return“Error:+err
}
}
异步组件didmount（）{
这是getMarginData（）
这是getOrderbookData（）
}
render（）{
报税表（
订单数据
{
console.log（'ORDERBOOKNOW'+this.state.orderbook），
this.state.orderbook&&this.state.orderbook.map（（顺序，键）=>
BuySell:{order.BuySell}
)     
}
);
}
}
导出默认应用程序；

---

现在我可以一个接一个地显示所有客户及其订单的数据。但是React会自动一个接一个地重新呈现数据。有人知道如何一次显示所有客户端数据，而不是自动通过循环并停止并显示循环中的最后一项数据吗？

你不能

JSON.stringify

一些东西并映射。而是做这样的事情,

import-React{
组成部分，
useState，
使用效果
}从"反应",；
导入“/App.css”；
进口{
卡片
卡迪姆，
卡片文本，
名片夹，
名片，
小标题:，
按钮
}来自“反应带”；
从“react Image resizer”导入图像；
从“firebase”导入*作为firebase；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.state={}
}
getMarginData（）{
const db=firebase.firestore（）；
返回db.collection（'Margin'）.get（）。然后（（querySnapshot）=>{
常量边距=[]
querySnapshot.forEach（doc=>{
margins.push（doc.data（））
控制台日志（页边距）；
});
这是我的国家({
利润率：利润率
})
});
}
getOrderbookData（）{
const db=firebase.firestore（）；
返回db.collection（'Orderbook'）.get（）。然后（（querySnapshot）=>{
const orderbooks=[]
querySnapshot.forEach（doc=>{
orderbooks.push（doc.data（））
控制台日志（订单簿）；
});
这是我的国家({
订单簿：订单簿[0]
})
});
}
componentDidMount（）{
这是getMarginData（）
这是getOrderbookData（）
}
render（）{
报税表（

保证金数据
{this.state.margins&&this.state.margins.map（（margin，index）=>