我有一个页面需要显示多个微调器。每当数据到达时,微调器都应该隐藏。
。在示例中,我有子组件,在其中我使用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}
/>
</>
);
}
}
啊,现在我明白了。因此,您的问题是,在卡组件中,您同时渲染了数据部分(显示数据或未找到数据)和微调器。您需要检查是否仍在获取数据(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>