Javascript 如何在react中的axios响应之后有条件地重定向到页面？

如果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>
    )
  }
}

---

我可以很好地重定向，但问题是连续循环。即使用户信息正在存储重定向，但重定向是在循环中调用的

我猜问题在于componentDidMount，您在axios完成其get请求之前重定向，请按如下方式重构代码，您可以显示微调器的种类，直到axios返回值：

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

}

这取决于您使用的路由器，但如果您想要javascript方式，请检查以下代码：

// Simulate a mouse click:
window.location.href = "http://www.w3schools.com";

// Simulate an HTTP redirect:
window.location.replace("http://www.w3schools.com");

我猜问题是componentDidMount，在axios完成get请求之前，您正在重定向，请按照以下方式重构代码，您可以显示微调器的类型，直到axios返回值：

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

}

这取决于您使用的路由器，但如果您想要javascript方式，请检查以下代码：

// Simulate a mouse click:
window.location.href = "http://www.w3schools.com";

// Simulate an HTTP redirect:
window.location.replace("http://www.w3schools.com");

---

在这里当你得到回应

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

检查资源数据以获取用户信息。若你们确实收到了一个用户，那个么你们可以设置状态，若并没有用户重定向到登录页面

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

---

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

当您收到响应时，请点击此处

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

检查资源数据以获取用户信息。若你们确实收到了一个用户，那个么你们可以设置状态，若并没有用户重定向到登录页面

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

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

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

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

---

您可以尝试以下方法：

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>
    )
  }
}

---

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

您可以尝试以下方法：

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>
    )
  }
}

---

---

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

使用路由器Hoc包装您的组件，然后使用props.history.push/yourroute如果您使用的是react-routerI，我可以很好地重定向，但问题在于连续循环。Warrier说，即使用户信息存储在loopAs@Sujit.Warrier中调用重定向，也要使用push方法，如window.location=。。。将进行硬导航，重新加载应用程序并使所有内容重新呈现。此外，此检查可能最好放在组件树的较高位置。更接近根应用程序组件。标头组件检查它们是否已登录是没有意义的。这也意味着当你在页面之间导航时，它将位于一个不会被重新渲染的位置，这应该可以解决问题使用路由器Hoc包装您的组件，然后使用props.history.push/yourRoute如果您使用的是react-routerI，我可以很好地重定向，但问题在于连续循环。Warrier说，即使用户信息存储在loopAs@Sujit.Warrier中调用重定向，也要使用push方法，如window.location=。。。将进行硬导航，重新加载应用程序并使所有内容重新呈现。此外，此检查可能最好放在组件树的较高位置。更接近根应用程序组件。标头组件检查它们是否已登录是没有意义的。这也意味着当你在页面之间导航时，它将处于一个不会被重新渲染的位置，这将解决问题我可以很好地重定向，但问题是连续循环。即使用户信息存储在循环中调用重定向，您是否可以共享登录页面中的内容？登录页面是一个外部api。它返回一个包含用户信息的对象，我可以很好地重定向，但问题在于连续循环。即使用户信息存储在循环中调用重定向，您是否可以共享登录页面中的内容？登录页面是一个外部api。它返回一个包含用户信息的对象Hi Jason我知道纯javascript是非传统的，但这里我需要使用它，稍后我可能会更改它。好吧，不管你想重定向，那么在

---

检查API响应后的语句。嗨，Jason，我知道纯javascript是非传统的，但这里我需要使用它，稍后我可能会更改itOk。不管你想重定向，在检查API响应后在then语句中这样做。谢谢这个答案，测试后肯定会在这里更新结果。谢谢这个答案，测试后肯定会在这里更新结果。