Question

我正在使用反应，并且已经制作了一个导航栏，该导航栏应该会在您登录时更改内容。

例如，您拥有home register login，而登录后就拥有home logout。

问题是第一次重定向成功后，导航栏在您成功登录后并没有改变，我也不明白为什么。

登录页面：

export default class Login extends React.Component {
    render() {
        if (localStorage.getItem("jwt-token")) {
            return (
                <Redirect to = "/home" />
            );
        }
        return (
            <div id="main">
                <NavBar />
                <div id="body">
                    Login
                    <LoginForm />
                </div>
                <Footer />
            </div>
        );
    }
}

这是LogginForm中的

   render() {
       if (this.state.isLogged === true) {
           return (
               <Redirect to = {{ pathname: "/home" }} />
           );
       }
       ... //rest of the form when you're not logged in.
   }

和主页：

export default class Home extends React.Component {
    render() {
        return (
            <div id="main">
                <NavBar />
                <div id="body">
                    Home
                </div>
                <Footer />
            </div>
        );
    }
}

这是我的导航栏组件：

export default class NavBar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isLogged: undefined,
            login: "",
        }
    }

    async componentWillMount() {
        let token = localStorage.getItem("jwt-token");
        console.log(token);
        if (token) {
            let decodedToken = jwt.decode(token, "secretKey");
            this.setState({
                isLogged: true,
                login: decodedToken.userInfo.login,
            });
        }
    }

    render() {
        if (this.state.isLogged === true) {
            return (
                <div>
                    <ul>
                        <li><Link to="/home">Home</Link></li>
                        <li><Link to="/logout">Logout</Link> [{this.state.login}]</li>
                    </ul>
                </div>
            );
        }
        return (
            <div>
                <ul>
                    <li><Link to="/home">Home</Link></li>
                    <li><Link to="/register">Register</Link></li>
                    <li><Link to="/login">Login</Link></li>
                </ul>
            </div>
        );
    }
}

P / s： 非常简单，我只是尝试了解其工作原理。

因此，正如我第一次说的那样，它重定向到主页时，我的导航栏就像我未通过身份验证但我是。当我刷新页面时，导航栏终于出现，就像我通过身份验证一样。

我的问题是：我为什么需要重新加载页面？

感谢帮助。

Answer 1

根据docs的建议：

UNSAFE_componentWillMount（）在挂载发生之前被调用。它在render（）之前调用，因此在此方法中同步调用setState（）不会触发额外的渲染。通常，我们建议使用constructor（）代替初始化状态。

避免在此方法中引入任何副作用或订阅。对于这些用例，请改用componentDidMount（）。

另请参阅this。

我认为您应该将逻辑从componentWillMount转移到constructor方法。它应该可以解决问题。

编辑：像这样：

constructor() {
    super(props);
   let isLogged = false
   let login = undefined
   let token = localStorage.getItem("jwt-token");
   if (token) {
     let decodedToken = jwt.decode(token, "secretKey");
     isLogged= true
     login = decodedToken.userInfo.login
   }
   this.state = {
        isLogged: undefined,
        login: "",
   }
}

Answer 2

对于那些想知道解决方案的人，它只是在组件LoginForm中，我在setState之后设置了我的令牌，然后在注册该令牌之前进行了渲染。

我只是颠倒了两行，所以效果很好！

登录后正确渲染组件

2 个答案: