如何延迟React中的componentDidMount API抓取？

• Z时代
• 2024-01-10
• 分类：问答

我使用Axios获取数据，并希望使加载动画更长（出于个人原因）。如何延迟React中的componentDidMount API抓取？

componentDidMount(){ 
    var that = this; 
    axios.get('api.something.io.json', { 
     params: data 
     }) 
     .then(function (response) { 
     console.log(response); 
     that.setState({ 
      axiosResponse: response.data, 
      isLoading: false 
     }) 
     }) 
     .catch(function (error) { 
     console.log(error); 
     }); 
    }; 
    ... 
render() { 
    if(this.state.isLoading){ 
     return <div>Waiting...</div> 
    } 
    return (
     <div className="App"> 
     <h1>{this.state.axiosResponse.awesomeTitle}</h1> 
     </div> 
    ); 

现在Waiting...在主要组件呈现前出现一瞬间。我想将"Waiting..."延长一段时间，大约2-3秒。我尝试在componentDidMount上使用setTimeout，但它似乎没有工作。

componentDidMount(){ 
    setTimeout(this.setState({isLoading: 1}), 3000); 
    //do axios call here 
} 

我也试图stub内.then调用的setTimeout：

componentDidMount(){ 
    var that = this; 
    axios.get('https://api.rss2json.com/v1/api.json', { 
     params: data 
     }) 
     .then(function (response) { 
     console.log(response); 
     setTimeout(
      that.setState({ 
      axiosResponse: response.data, 
      isLoading: false 
      }) 
      , 3000); 
     }) 
    ... 

无工作。如何将isLoading延长3秒？

回答：

setTimeout(function() { 
     that.setState({ 
     axiosResponse: response.data, 
     isLoading: false 
     }) 
    }, 3000); 

 setTimeout(
      that.setState({ 
      axiosResponse: response.data, 
      isLoading: false 
      }), 3000); 

以上是 如何延迟React中的componentDidMount API抓取？ 的全部内容， 来源链接： utcz.com/qa/257835.html