Question

从axios get请求获得响应后，我无法更改状态

这是一个使用MERN堆栈的简单登录/注册页面，在该页面中，我仅尝试在node.js后端对他进行授权后才能获得用户的个性化页面。我已经尝试过使用_ismount常见的方法，但是经过一些调试后，我看到在axios get之后立即调用componentWillMount方法，然后使_isMounted为false，因此不会进入我使用setState的if代码中

class User extends Component {
    _isMounted = false;

    constructor(props){
        super(props)

        this.state={
            isAuthenticated:false
        }
    }

    componentDidMount(){
        this._isMounted = true;
        const token=localStorage.getItem("token");
        //alert(token);
        axios
        .get(`https://localhost:3443/users/${this.props.user}`,{ headers: { Authorization: `Bearer ${token}` } })
        .then(res => {
            if (this._isMounted){
            this.setState(() => ({
                isAuthenticated:true
              }));
            }
        })
        .catch(err => alert(JSON.stringify(err)));
    }
    componentWillUnmount() {
        this._isMounted = false;
      }

    render() {
        if(this.state.isAuthenticated===false) return(<Redirect to="/home" />)
        return(
            <div>
                Hello {this.props.user}
            </div>
        );
    }
}

我只想在呈现页面之前执行axios获取，以检查用户是否被授权并相应地更改状态。

Answer 1

您的代码从未达到componentDidMount生命周期，因为在render函数中，您正在检查isAuthenticated是否为假并进行重定向。

当您将isAuthenticated的初始值设置为false时，它将始终重定向到/home并调用componentWillUnmount。

这是因为componentDidMount在第一个render完成之后运行。

要解决此问题，可以将isAuthenticated的初始值设置为null，以便您的组件将到达componentDidMount并执行axios调用以验证用户是否已通过身份验证

this.state = { isAuthenticated:null };

Answer 2

像这样更改您的渲染功能。我认为这可能对您有所帮助。

render(){
     return (
     <div>
      {
           this.state.isAuthenticated === false ? (
                      <Redirect to="/home" />
           ):(
                      <div>{this.props.user}</div>
              )
       }
      </div>
      )
}

我无法使用componentDidMount中的设置状态来更改状态

2 个答案: