Bringing in mehreren Lader auf einer einzigen Seite: JS React

stimmen
0

Ich versuche, ein Armaturenbrett zu implementieren, wo in ich habe einige der Elemente, die gezeigt werden muss. Im folgende Beispiel habe ich vier rechteckige Kästen (tatsächlich diejenigen sind 4 verschiedene Diagramme) und ein Tisch. Ich verwende für die Datenraster Zwecke reagieren Tisch und eine semantische-ui-reagieren-Tabelle für die Spinner Zwecke.

Nun ist die Frage, diese alle sind unabhängig voneinander. Ich habe die Daten mit Hilfe eines SetTimeout verspottet, als ob es aus dem Back-End kam. Ich brauche nur Einzellader und es sollte versteckt werden, wenn Daten ankommen. Ich habe den Lader als separate Komponente extrahiert, so dass sie als gemeinsame Lader verhält sich für alle Einzelteile.

Wenn ich Promise.all für die grafische Darstellung bezogenen Daten hat verwenden, wäre es die maximale Zeit, bis alle Entschlossenheit nehmen. Kann mir jemand einen besseren Ansatz für diese vorschlagen.

Mock Sandbox: https://codesandbox.io/s/react-table-row-table-vdnfh

App.tsx

import * as React from react;
import { render } from react-dom;
import DataGrid from ./DataGrid;
import ./styles.css;
import Card from ./Card;

interface IProps {}

interface IState {
  data: {}[];
  columns: {}[];
  spinnerFlag: boolean;
  cardData1: string;
  cardData2: string;
  cardData3: string;
  cardData4: string;
}

class App extends React.Component<IProps, IState> {
  constructor(props: any) {
    super(props);
    this.state = {
      cardData1: ,
      cardData2: ,
      cardData3: ,
      cardData4: ,
      data: [],
      columns: [],
      spinnerFlag: true
    };
  }

  componentDidMount() {
    this.getGraphData();
    this.getData();
    this.getColumns();
  }

  getGraphData = () => {
    this.setGraphData(graph1);
    this.setGraphData(graph2);
    this.setGraphData(graph3);
    this.setGraphData(graph4);
  };

  setGraphData = (cardNumber: string) => {
    if (cardNumber === graph1) {
      setTimeout(() => {
        this.setState({ cardData1: data1 });
      }, 1000);
    }
    if (cardNumber === graph2) {
      setTimeout(() => {
        this.setState({ cardData2: data2 });
      }, 2000);
    }

    if (cardNumber === graph3) {
      setTimeout(() => {
        this.setState({ cardData3: data3 });
      }, 3000);
    }
    if (cardNumber === graph4) {
      setTimeout(() => {
        this.setState({ cardData4: data4 });
      }, 4000);
    }
  };

  getData = () => {
    let data = [
      { firstName: Jack, status: Submitted },
      { firstName: Simon, status: Pending },
      { firstName: Pete, status: Approved }
    ];
    setTimeout(() => {
      this.setState({ data, spinnerFlag: false });
    }, 2000);
  };

  getColumns = () => {
    let columns = [
      {
        Header: First Name,
        accessor: firstName
      },
      {
        Header: Status,
        accessor: status
      }
    ];
    this.setState({ columns });
  };

  render() {
    return (
      <>
        <Card
          name=Card1
          data={this.state.cardData1}
          spinnerFlag={this.state.spinnerFlag}
        />
        <Card
          name=Card3
          data={this.state.cardData2}
          spinnerFlag={this.state.spinnerFlag}
        />
        <Card
          name=Card3
          data={this.state.cardData3}
          spinnerFlag={this.state.spinnerFlag}
        />
        <Card
          name=Card3
          data={this.state.cardData4}
          spinnerFlag={this.state.spinnerFlag}
        />
        <DataGrid
          data={this.state.data}
          columns={this.state.columns}
          spinnerFlag={this.state.spinnerFlag}
        />
      </>
    );
  }
}


Veröffentlicht am 09/10/2019 um 19:00
quelle vom benutzer
In anderen Sprachen...                            


1 antworten

stimmen
0

Ich bin mir nicht ganz sicher, was das Problem Sie versuchen zu lösen ist; Code Sandbox zeigt die Daten der Ankunft Karte-by-Karte, die ich denke, ist was du für. Da jeder Timeout aufgelöst wird, ändert sich der Zustand der Komponente-re macht, und die neu erscheint angekommen Daten.

Allerdings sehe ich , dass Sie die gleiche vorbei sind this.state.spinnerFlagin allen Karten. Stattdessen können Sie den Spinner Zustand auf der Grundlage der Verfügbarkeit der Daten berechnen.

<Card
  name="Card1"
  data={this.state.cardData1}
  spinnerFlag={this.state.cardData1 === ""}
/>

Dann wird der Spinner zeigt genau, bis die Daten für die Karte verfügbar ist.

Beantwortet am 09/10/2019 um 19:10
quelle vom benutzer

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more