Question

我具有此功能，可以从我的支持中获取一些数据并重新呈现状态。后端中正在进行一些处理，因此呈现状态需要花费几秒钟。

有没有一种方法可以在状态呈现之前呈现加载消息？

 handleSpecies(e){
    console.log(e.target.text)
    let filteredSpecies = [];
    fetch('http://127.0.0.1:8000/api/films/search/'+ e.target.text).then(results => {
      if(results.ok){
        return results.json();
      }
      throw new Error('Failed to fetch');

    })
    .then(data => {
      filteredSpecies = data;
      this.setState({species:filteredSpecies})
    })
    .catch((error) => {
    this.setState({ error: error.message } )
    });

  }

  render() {
    return (
     <div className="col-md-4">
        <div className="list-group">
        {

          this.state.species.map((species, i) => {
            return (
              <a href="#" className="list-group-item" key={i}>{species.name}</a>

            );
          })
        } 
      </div>
    </div>
)
}

Answer 1

只需在映射物种之前添加一个三元数：如果物种为空或易碎，则打印一条消息。

 <div className="col-md-4">
    <div className="list-group">
    {(!this.state.species || !this.state.species.length) ?
      this.state.species.map((species, i) => {
        return (
          <a href="#" className="list-group-item" key={i}>{species.name}</a>

        );
      }) : <p> Please wait </p>
    } 
  </div>
</div>

Answer 2

定义一个new ImplementationRest状态变量将是解决您的问题的好方法。

您可以在触发异步请求之前将其设置为isLoading，并在请求完成或失败时将其设置为true。

然后，您只需要基于false标志有条件地渲染组件即可。

表明您的问题的代码段如下：

isLoading

Answer 3

要记住的主要事情是，拥有is<SomeThing>Loading标志可以使您A）在页面的每个部分具有多个加载指示器，并且B）允许显式处理错误，呈现等。这有助于避免所有“如果列表为空，则可能是我的API调用未成功”或其他模棱两可的情况。

只提供您的代码，这就是我要做的

 handleSpecies(e){
   this.setState({ isSpeciesLoading : true })
    fetch('http://127.0.0.1:8000/api/films/search/'+ e.target.text).then(results => {
      if(results.ok){
        return results.json();
      }
      throw new Error('Failed to fetch');

    })
    .then(data => {
      this.setState({species:data, isSpeciesLoading : false})
    })
    .catch((error) => {
    this.setState({ error: error.message, isSpeciesLoading : false } )
    });

  }

  render() {
    return (
     <div className="col-md-4">
        <div className="list-group">
        {this.state.isSpeciesLoading ? <div>Loading...</div>
        {
          !this.state.isSpeciesLoading &&
          this.state.species.map((species, i) => {
            return (
              <a href="#" className="list-group-item" key={i}>{species.name}</a>

            );
          })
        } 
      </div>
    </div>
)
}

在加载新状态之前反应渲染消息

3 个答案: