Con lo que en varios cargadores en una sola página: Reaccionar JS

votos
0

Estoy tratando de implementar un salpicadero en la que en la que tengo par de elementos que hay que demostrar. En el siguiente ejemplo tengo 4 cajas rectangulares (en reales son los gráficos de 4 diferentes) y una mesa. Estoy usando reaccionar mesa con el fin de cuadrícula de datos y una semántica-ui-reacciono de mesa para los fines del hilandero.

Ahora la cuestión es, todos éstos son independientes entre sí. Me he burlado de los datos usando un setTimeout como si viniera desde el back-end. Todo lo que necesito es cargadores individuales y que debe ser ocultado siempre que llegue datos. He extraído el cargador como un componente separado, por lo que se comporta como un cargador común para todos los elementos.

Si lo hiciera uso Promise.all de los datos relacionados con el gráfico, que tomaría el tiempo máximo hasta que todo determinación. ¿Puede alguien sugerir una mejor enfoque para esto.

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


Publicado el 09/10/2019 a las 19:00
fuente por usuario
En otros idiomas...                            


1 respuestas

votos
0

No estoy del todo seguro de lo que el problema que estamos tratando de resolver es; su caja de arena de código muestra los datos que llegan tarjeta por tarjeta, que creo que es lo que vamos a ir. A medida que cada tiempo de espera se resuelve, aparecen los cambios de estado, el componente vuelve a renderizar, y los datos recién llegados.

Sin embargo, veo que estás pasando el mismo this.state.spinnerFlagen todas las cartas. En su lugar se puede calcular el estado de ruleta basado en la disponibilidad de los datos.

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

A continuación, el spinner mostrará exactamente hasta que los datos de dicha tarjeta está disponible.

Respondida el 09/10/2019 a las 19:10
fuente por usuario

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