javascript - 为什么在新的 react-router-dom 中 不在 setTimeout 内触发？

Question

因此，我尝试在注销页面和重定向到主网站页面之间做一些延迟。但我遇到了问题，react-router-dom <Redirect/>当我们把它放在 setTimeout() 中时，方法不需要触发的 setInterval() .

所以，如果我们从计时器中解包它，<Redirect/>将正常工作。

问题是什么，有什么建议吗？

我的代码:

import React, { Component } from 'react';
import { Redirect } from 'react-router-dom';
import axios from 'axios';

class LogoutPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            navigate: false
        }
    }

    componentDidMount(e) {
        axios.get('http://localhost:3016/logout')
        .then(
            this.setState({
                navigate: true
            }),
        )
        .catch(err => {
            console.error(err);
        });

        if (this.state.navigate) {
            setTimeout(() => {
                return <Redirect to="/employers" />
            }, 2000);
        }
    };

    render() {
        if (this.state.navigate) {
            setTimeout(() => {
                 return <Redirect to="/employers" />
            }, 2000);
        }
        return (
            <div>You successfully logouted</div>
        )
    }
}

export default LogoutPage;

Answer 1

你想要 render()返回方法 <Redirect />为了进行重定向。当前setTimeout函数返回 <Redirect /> , 但这并不影响 render() 的结果本身。

因此，render()应该简单地 return <Redirect / > 如果 this.state.navigate是true然后你延迟了setState({ navigate: true })方法用时 2 秒。

这是一种更正的声明式方式:

class LogoutPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            navigate: false
        }
    }

    componentDidMount(e) {
        axios.get('http://localhost:3016/logout')
        .then(() => setTimeout(() => this.setState({ navigate: true }), 2000))
        .catch(err => {
            console.error(err);
        });

    };

    render() {
        if (this.state.navigate) {
          return <Redirect to="/employers" />
        }

        return (
          <div>You successfully logouted</div>
        );
    }
}

对于命令式版本，请参阅@Shubham Khatri 的回答。