Javascript 在等待API调用以返回数据时对实施活动控制盘作出反应

只是想从收集API（超级有趣的游戏）中返回一些数据。当我试图通过搜索一些卡片来调用它们时，api返回数据的速度有点慢

我有一个react引导模式，每当我搜索一个词时就会弹出。我想在等待取回卡片时在其中渲染一个微调器，然后在出现一些卡片时将其移除

我在想，当我的卡片数组为空或未定义时，我可以只显示微调器，但因为有一个待定的承诺表示值，我认为这行不通

有人能帮我找到最好的方法吗

state = {
  modal: false,
  form: "",
  result: []
};

// function to get cards from the api and update the state

cardsLoaded = () => {
  if (this.state.result === [] || this.state.result === undefined) {
    return (
      <Spinner animation="border" role="status">
        <span className="sr-only">Loading...</span>
      </Spinner>
    );
  } else {
    return (
      <div style={{ display: "block", width: "10em" }}>
        {this.state.result.map((card, section, index, add) => {
          return (
            <div key={section} style={{ display: "inline" }}>
              <button key={index}>{card}</button>
              <button key={add} onClick={() => this.props.addToDeck(card)}>
                <GiCardPlay />
              </button>
            </div>
          );
        })}
      </div>
    );
  }
};

状态={
莫代尔：错，
表格：“，
结果：[]
};
//函数从api获取卡并更新状态
卡片卡片=（）=>{
if（this.state.result==[]| | this.state.result===未定义）{
返回(
加载。。。
);
}否则{
返回(
{this.state.result.map（（卡片、部分、索引、添加）=>{
返回(
{card}
this.props.addToDeck（卡片）}>
);
})}
);
}
};

这是渲染微调器的模式：

<Modal
  show={this.state.modal}
  onExit={() => console.log("modal closed")}
  size="lg"
  aria-labelledby="contained-modal-title-vcenter"
  centered
>
  <Modal.Header closeButton>
    <Modal.Title id="contained-modal-title-vcenter">Modal heading</Modal.Title>
  </Modal.Header>

  <Modal.Body>{() => this.cardsLoaded()}</Modal.Body>
  <Modal.Footer>
    <Button onClick={this.closeModal}>Close</Button>
  </Modal.Footer>
</Modal>;

console.log（“模式关闭”）}
size=“lg”
aria labelledby=“包含模式标题vcenter”
居中的
>
模态标题
{（）=>this.cardsLoaded（）}
接近
;

您是否可以在调用API时设置“加载”标志，然后在解决API调用时清除该标志

//从API获取时将加载标志设置为true
this.setState（{loading:true}）；
//从api获取，在api调用解析后将标志设置为false
//（无论成功与否）
取（'http://apiuri.com/')
。然后（res=>{
//在这里处理响应。。。
this.setState（{loading:false}）；
})
.catch（错误=>{
//在这里处理错误。。。
this.setState（{loading:false}）；
})

然后，在渲染

微调器的地方，可以使用
加载
标志有条件地渲染它

this.state.loading&&(
加载。。。
)

您可能需要根据组件层次结构调整一些状态/道具
您是否可以在调用API时设置“加载”标志，然后在解决API调用时清除它

//从API获取时将加载标志设置为true
this.setState（{loading:true}）；
//从api获取，在api调用解析后将标志设置为false
//（无论成功与否）
取（'http://apiuri.com/')
。然后（res=>{
//在这里处理响应。。。
this.setState（{loading:false}）；
})
.catch（错误=>{
//在这里处理错误。。。
this.setState（{loading:false}）；
})

然后，在渲染
微调器的地方，可以使用
加载
标志有条件地渲染它

this.state.loading&&(
加载。。。
)

根据组件层次结构，您可能需要调整一些状态/道具
您正在通过引用比较数组。空数组文字永远不会等于另一个（
if（this.state.result===[]）
）。尝试在条件中使用
array.length
。同意@HynekS。另一个选项是让API调用设置一个“加载标志”来呈现微调器，然后当API调用解析时，它可以清除该标志。尽管如此，根据组件的结构，这可能很简单，也可能不简单。您正在通过引用比较数组。空数组文字永远不会等于另一个（
if（this.state.result===[]）
）。尝试在条件中使用
array.length
。同意@HynekS。另一个选项是让API调用设置一个“加载标志”来呈现微调器，然后当API调用解析时，它可以清除该标志。尽管如此，根据组件的结构，这可能不是一件小事。