时间戳

首页 > 解决方案 > ComponentDidMount 中的 axios.get 函数未按预期设置状态

reactjs - ComponentDidMount 中的 axios.get 函数未按预期设置状态

问题描述

在我的标题组件中，我设置了条件渲染以根据用户是否登录来显示不同的链接。条件渲染工作得很好，除了它会在显示正确的链接集之前闪烁一组链接。

我突然意识到这是因为axios.get我有一个调用来检索用户的状态。状态变量最初设置为 false。如果用户已登录，get 调用将指示这一点，并且状态变量将设置为 true。短暂的延迟使得“未登录”链接在“已登录”链接显示之前短暂显示。

我在这两种方法中都尝试了很多推荐的方法componentDidMount-componentWillMount似乎没有任何效果：

componentDidMount() {
    axios.get('http://localhost:8000/api/login', {
        withCredentials: true
    }).then(res => {
        if (res.data.loggedIn) {
            this.setState({isLogged: true});
        } else {
            this.setState({isLogged: false});
        }
    }).catch(error => {
        this.setState({isLogged: false});
    });
}

下一个方法：

async componentDidMount() {
    const res = await axios.get('http://localhost:8000/api/login', {
        withCredentials: true
    });
    const logged = await res.data.loggedIn;

    if (logged) {
        this.setState({isLogged: true});
    } else {
        this.setState({isLogged: false});
    }
}

我尝试过具有相同结果的回调函数。

条件渲染是典型的： 

{this.state.isLogged && <LoggedIn />}

我显然没有看到异步函数如何工作的基本内容——我只是不确定那是什么！

提前致谢！！

标签： reactjsasynchronousrenderingstate

解决方案

在这种情况下，您可以做的最好的事情是在请求完成之前不显示任何内容或显示微调器。不管你做什么（异步/等待、承诺、回调）请求都需要一些时间。

推荐阅读