Φέρνοντας σε πολλαπλές φορτωτές σε μία μόνο σελίδα: React JS

ψήφοι
0

Είμαι προσπαθεί να εφαρμόσει ένα ταμπλό όπου το έχω μερικά στοιχεία που πρέπει να εμφανίζονται. Στο ακόλουθο παράδειγμα έχω 4 ορθογώνια κουτιά (Στην πραγματική αυτά είναι 4 διαφορετικές γραφικές παραστάσεις) και ένα τραπέζι. Είμαι χρησιμοποιώντας αντιδράσει-πίνακα για τους σκοπούς του δικτύου δεδομένων και μια σημασιολογική-ui-αντιδρούν πίνακα για τους σκοπούς spinner.

Τώρα το θέμα είναι, όλα αυτά είναι ανεξάρτητες μεταξύ τους. Έχω χλεύαζαν τα δεδομένα χρησιμοποιώντας setTimeout σαν να προέρχεται από το back-end. Το μόνο που χρειάζεται είναι ατομική φορτωτές και πρέπει να κρύβεται κάθε φορά που τα δεδομένα φτάνει. Έχω εξαχθεί το φορτωτή ως ένα ξεχωριστό στοιχείο, έτσι ώστε να συμπεριφέρεται ως κοινός φορτωτή για όλα τα είδη.

Αν έκανα χρήση Promise.all για τα δεδομένα που σχετίζονται με το γράφημα, θα λάβει το μέγιστο χρονικό διάστημα μέχρι όλα αποφασιστικότητα. Μπορεί κάποιος να μου προτείνει μια καλύτερη προσέγγιση για το σκοπό αυτό.

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


Δημοσιεύθηκε 09/10/2019 στις 19:00
πηγή χρήστη
Σε άλλες γλώσσες...                            


1 απαντήσεις

ψήφοι
0

Δεν είμαι απόλυτα σίγουρος ποιο είναι το πρόβλημα που προσπαθείτε να λύσετε είναι? Κωδικός sandbox σας παρουσιάζει τα δεδομένα που φθάνουν κάρτας ανά κάρτα, η οποία νομίζω ότι είναι ό, τι πρόκειται για. Καθώς κάθε χρονικού ορίου επιλύει, φαίνεται οι αλλαγές κατάστασης, η συνιστώσα εκ νέου καθιστά, και οι νεοαφιχθέντες δεδομένα.

Ωστόσο, βλέπω ότι είστε περνώντας το ίδιο this.state.spinnerFlagσε όλες τις κάρτες. Αντ 'αυτού, μπορείτε να υπολογίσετε την κατάσταση κλωστή με βάση τη διαθεσιμότητα των δεδομένων.

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

Στη συνέχεια, η κλωστή θα δείξει ακριβώς μέχρι τα στοιχεία για την εν λόγω κάρτα είναι διαθέσιμη.

Απαντήθηκε 09/10/2019 στις 19:10
πηγή χρήστη

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