Question

我有一个页面需要显示多个微调器。每当数据到达时，微调器都应该隐藏。

。在示例中，我有子组件，其中使用settimeout模拟了数据，就好像它们来自后端一样。

我已将加载程序提取为一个单独的组件，以便它可以充当所有项目的通用加载程序。

通常，如果有的话，API会给我一组项目，如果不是，则为空数组。

尝试了一些方法，但是对于所有卡，它都显示未找到，然后被内容替换

沙盒：https://codesandbox.io/embed/react-table-row-table-vdnfh?codemirror=1

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

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

  componentDidMount() {
    this.getGraphData();
  }

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

  setGraphData = (cardNumber: string) => {
    //based on the attribute I set the corresponding card data
    if (cardNumber === "graph1") {
      setTimeout(() => {
        this.setState({ cardData1: [1, 2, 3] });
      }, 1000);
    }
    if (cardNumber === "graph2") {
      setTimeout(() => {
        this.setState({ cardData2: [3, 4, 5] });
      }, 2000);
    }

    if (cardNumber === "graph3") {
      setTimeout(() => {
        this.setState({ cardData3: [6, 7, 8] });
      }, 3000);
    }
    if (cardNumber === "graph4") {
      setTimeout(() => {
        this.setState({ cardData4: [] });
      }, 4000);
    }
  };

  render() {
    let { cardData1, cardData2, cardData3, cardData4 } = this.state;
    return (
      <>
        <Card
          name="Card1"
          data={this.state.cardData1}
          spinnerFlag={cardData1 === undefined}
        />
        <Card
          name="Card3"
          data={this.state.cardData2}
          spinnerFlag={cardData2 === undefined}
        />
        <Card
          name="Card3"
          data={this.state.cardData3}
          spinnerFlag={cardData3 === undefined}
        />
        <Card
          name="Card4"
          data={this.state.cardData4}
          spinnerFlag={cardData4 === undefined}
        />
      </>
    );
  }
}

Answer 1

现在我明白了。因此，您的问题是，在卡组件中，您同时渲染了数据部分（显示数据或未找到数据）和微调器。您需要检查是否仍在获取数据（spinnerFlag），并根据该标志有条件地呈现微调器或数据。

        <div className="box">
          {
            this.props.spinnerFlag ? (
              <Spinner spinnerFlag={this.props.spinnerFlag} />
            ) : (
              <div>
                {data && data.length ? (
                  data.map((val: any, index: any) => (
                    <span key={index}>Value : {val} </span>
                  ))
                ) : (
                  <div>Not found</div>
                )}
              </div>
            )
          }
        </div>

编辑：我的意思是，当您初始化变量时，只需使用null，因为您实际上是在设置'值'

this.state = {
  cardData1: null,
  cardData2: null,
  cardData3: null,
  cardData4: null
};

然后当您完成

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

!是一个运算符，其基本含义是“ not”，并且将得出与实际变量相反的布尔值。因此，如果cardData1为null（假），则!cardData1将为true。然后，在设置数据后，它将为false。

P.S有趣的把戏，!!如果出于某种原因需要布尔值，则将其强制为布尔值

在父组件中使用组件的多个实例

1 个答案: