Question

在此测试组件中，调用api和内部成功响应的

重定向到外部页面，例如（https：google.com），但是该页面大约需要6秒钟的时间才能加载，并且有一个加载器组件显示直到该页面已加载，但仅在最短时间内显示，我需要显示加载器组件，直到页面加载完毕。有人可以帮忙吗？

import React from 'react'
import './index.css';
import {
  withRouter
} from 'react-router-dom';
import axios from 'axios';

class Test extends React.Component {
  componentDidMount() {
    const id_token = localStorage.getItem('id_token') ? localStorage.getItem('id_token') : '';
    const headers = {
      'Content-Type': 'application/json',
      'Authorization': id_token,
    }
    axios.get(‘some api’, { "headers": headers })
      .then((response) => {
        if (JSON.stringify(response.status) == 200) {
          this.props.history.push('/loading'); // calling my loader page component. 
          window.location.replace(‘http://google.com’) // redirecting to external link, example google.
        }
        return console.log("data", JSON.stringify(response));
      })
      .catch((error) => {
        this.props.history.push(‘/error’) // redirecting to error page, when we get error response.
        return console.log("error", error)
      })
  }

 render() {
    return (
      <div>
      </div>
    )
  }
}

export default withRouter(Test);

显示了加载程序组件，但是一旦页面被重定向到外部链接，它就会隐藏，并且应该一直保留到外部页面完全加载为止。

Answer 1

默认情况下，您可以使用路由器的/loading路由来显示加载程序，因为您知道该API将在componentDidMount上调用并在成功后重定向。这样，将显示加载程序，直到API给出成功或错误为止。现在，您成功重定向到/loading，但是由于下一条语句，它仍将重定向页面

OR

您可以简单地使用组件的状态来显示加载状态或错误状态。

import React from 'react'
import './index.css';
import axios from 'axios';

class Test extends React.Component {
  state = {
    loading : true,
    error: null
  }

  componentDidMount() {
    const id_token = localStorage.getItem('id_token') ? localStorage.getItem('id_token') : '';
    const headers = {
      'Content-Type': 'application/json',
      'Authorization': id_token,
    }
    axios.get(‘some api’, { "headers": headers })
      .then((response) => {
        this.setState({
          loading: false
        })
        if (JSON.stringify(response.status) == 200) {
          window.location.replace('http://google.com')
        }
        return console.log("data", JSON.stringify(response));
      })
      .catch((error) => {
        this.setState({
          loading: false,
          error: true
        })
        return console.log("error", error)
      })
  }

 render() {
    const {loading,error} = this.state.loading
    if(loading){
      return <Loader />
    }
    if(error){
      return <Error />
    }
    return <div>Some Default Content</div>
  }
}

export default Test;

希望这会有所帮助！

Answer 2

我认为您的方法不正确。您正在导航到一个新页面（加载页面），这只是一种简单的方法。您可以使用加载微调器组件或仅使用文本来显示页面正在加载。一种方法是使用状态。设置加载状态并将其初始化为true。请求完成后，将加载设置为false。使用加载状态可以有条件地渲染加载组件。

import React from 'react'
import './index.css';
import {
  withRouter
} from 'react-router-dom';
import axios from 'axios';

class Test extends React.Component {

  state = {
     loading: true
   };

  componentDidMount() {
    const id_token = localStorage.getItem('id_token') ? localStorage.getItem('id_token') : '';
    const headers = {
      'Content-Type': 'application/json',
      'Authorization': id_token,
    }
    axios.get(‘some api’, { "headers": headers })
      .then((response) => {
        if (JSON.stringify(response.status) == 200) {
          this.setState({ loading: false });
          window.location.replace(‘http://google.com’) // redirecting to external link, example google.
        }
        return console.log("data", JSON.stringify(response));
      })
      .catch((error) => {
        this.setState({ loading: false });
        this.props.history.push(‘/error’) // redirecting to error page, when we get error response.
        return console.log("error", error)
      })
  }

 render() {
   const {loading} = this.state;
   let toBeRendered;
   if(loading) {
      toBeRendered = <Loading />
    } else {
       toBeRendered = <YourOriginalComponent />
    }

    return (
      <div>
          {toBeRendered}
      </div>
    )
  }
}

export default withRouter(Test);

显示加载程序，直到页面完全加载为止

2 个答案: