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

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

! 是一个运算符，基本上表示“不”，并将计算为与实际变量相反的布尔值。所以如果cardData1 是null（错误），!cardData1 将是true。那么设置数据的时候就为假了。

P.S 有趣的技巧，!! 如果您出于任何原因需要布尔值，则将其强制为布尔值