如何在axios响应后有条件地重定向到页面？

Question

如果axios api为空或初始状态为空，如何有条件地重定向到页面。在下面的代码中，我使用axios更新状态，用户信息在状态中可用，但代码继续调用http://userapi.com/login在循环中。我试图实现的是，如果userinfo状态最初为空，则重定向到登录页面并进行身份验证。

class MyComponent extends React.Component {
  constructor() {
    super()
    this.state = {
      userinfo:{}
    }
  }
  
  componentDidMount(){
    axios.get('http://userapi.com/user')
    .then(res => {
        const userinfo = res.data;
        this.setState({ userinfo });
    })
    .catch(err => {
        console.log("Fetch error", err)
    })
    if (Object.keys(this.state.userinfo).length === 0) {
        window.location = 'http://userapi.com/login';
    }
  }
  render() {
    return (
      <React.Fragment>
        <Header>Welcome</Header>
      </React.Fragment>
    )
  }
}

我能够重定向罚款，但问题是与连续循环。即使用户信息存储重定向被调用（发生在循环中）

Answer 1

在这里当你得到回应。。。

.then(res => {
        const userinfo = res.data;
        this.setState({ userinfo });
    })

检查res.data的用户信息。如果您确实收到了一个用户，那么您可以setState，如果没有用户重定向到登录页面。

至于重定向，请查看react路由器或react路由器dom

我不会在React应用程序中使用纯javascript进行重定向/导航。

Answer 2

Axios返回Promise，因此在更新块中状态的函数之前，如果执行下面的条件，则执行带有的代码。因此，如果您需要在请求成功后检查更新的状态值，请将您的条件放入然后块中。

componentDidMount() {
    axios
      .get('http://userapi.com/user')
      .then((res) => {
        const userinfo = res.data;
        this.setState({ userinfo }, () => {
          if (Object.keys(this.state.userinfo).length === 0) {
            window.location = 'http://userapi.com/login';
          }
        });
      })
      .catch((err) => {
        console.log('Fetch error', err);
      });
  }

Answer 3

您可以尝试以下方法：

class HeaderComponent extends React.Component {
  constructor() {
    super()
    this.state = {
      userinfo:{}
    }
  }
  
  componentDidMount(){
    axios.get('http://userapi.com/user')
    .then(res => {
        const userinfo = res.data;
        this.setState({ userinfo });
    })
    .catch(err => {
        console.log("Fetch error", err)
    })
  }
  componentDidUpdate(prevProps, { userinfo }) {
    if (userinfo !== this.state.userinfo
        && Object.keys(this.state.userinfo.w3idUser || {}).length === 0) {
        window.location = 'http://userapi.com/login';
    }
  }
  render() {
    return (
      <React.Fragment>
        <Header>Welcome</Header>
      </React.Fragment>
    )
  }
}

问题是，this.state.w3idUser从不存在，因为您正在将响应映射到userInfo状态。