Question

在我的标题组件中，我将条件渲染设置为根据用户是否登录显示不同的链接。条件渲染工作正常除了它在显示正确的链接集之前闪烁一组链接这一事实。

我突然意识到这是因为我有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 />}

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

提前致谢!!

Answer 1

在这种情况下，您可以做的最好的事情是在请求完成之前不显示任何内容或显示微调器。无论你做什么（async / await，promise，callback），请求都需要一些时间。

Answer 2

这是我发现有用的方法。将加载变量添加到state：

async componentDidMount() {
    this.setState({ loading: true });

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

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

然后，您可以添加：

{!this.state.loading && this.state.isLogged && ...}

如果仍然看到闪存，你总是可以在组件的构造函数中将loading设置为true，但我会尝试使用与实际加载的进程相同的方法加载。

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

2 个答案: