ReactJs - Невозможно отобразить все данные одновременно. L oop для получения данных запускается автоматически путем повторного рендеринга по одному и останавливается на последнем наборе данных

Question

Изображение моей 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;

Теперь я могу отображать данные для всех клиентов и всех их заказов по одному. Но React автоматически перерисовывает данные один за другим. Кто-нибудь знает, как отобразить все данные клиентов одновременно, вместо того, чтобы автоматически проходить через l oop и останавливать и отображать последний элемент данных в l oop?

Answer 1

Вы не можете JSON.stringify что-то и карту. Скорее сделайте что-то вроде этого,

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 = {}
  }

  getMarginData() {

    const db = firebase.firestore();
    return db.collection('Margin').get().then((querySnapshot) => {
      const margins = []
      querySnapshot.forEach(doc => {
        margins.push(doc.data())

        console.log(margins);
      });

      this.setState({
        margins: margins
      })

    });

  }

  getOrderbookData() {

    const db = firebase.firestore();
    return db.collection('Orderbook').get().then((querySnapshot) => {
      const orderbooks = []
      querySnapshot.forEach(doc => {
        orderbooks.push(doc.data())

        console.log(orderbooks);
      });

      this.setState({
        orderbooks: orderbooks[0]
      })

    });
  }


  componentDidMount() {

    this.getMarginData()
    this.getOrderbookData()

  }

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

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

          <p>
              <h2> Margin Data </h2>
              <h5> 
                {this.state.margins && this.state.margins.map((margin, index) =>
                  <div key = {margin.Client1.ALB} > < /div>            
                )} 
              </h5>
          </p>

          <p>
              <h2> Orderbook Data </h2> 
              <card>
                  <h5> {JSON.stringify(this.state.orderbooks)} </h5> 
              </card> 
          </p>

      </div>
    );
  }
}

export default App;