在单个页面中引入多个加载器：React JS

Question

我正在尝试实现一个仪表板，其中需要显示几个项目。在下面的示例中，我有4个矩形框（实际上是4个不同的图形）和一个表格。我正在将react-table用于数据网格，将语义ui-react表用于Spinner。

现在的问题是，这些都彼此独立。我已经使用settimeout模拟了数据，就好像它来自后端一样。我需要的只是单个加载程序，每当数据到达时都应该将其隐藏。我已将加载程序提取为一个单独的组件，以便它对所有项目都充当通用加载程序。

如果我确实将Promise.all用于图形相关数据，则将花费最长时间解决所有问题。有人可以为此建议我一个更好的方法。

可以为每个项目使用单独的标志，但这似乎不是一个好方法。

模拟沙箱：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 Card from "./Card";

class App extends React.Component<IProps, IState> {
  constructor(props) {
    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) => {
    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}
        />
      </>
    );
  }
}

Answer 1

我不确定您要解决的问题是什么；您的代码沙箱会逐张显示到达的数据，我想这就是您要的。随着每个超时的解决，状态会改变，组件会重新渲染，并显示新到达的数据。

但是，我看到您正在将相同的this.state.spinnerFlag传递到所有卡中。相反，您可以根据数据的可用性来计算微调器状态。

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

然后微调框将精确显示，直到该卡的数据可用为止。