javascript - 如果功能不是最新的 react

Question

我是这个神奇网站的新手，我只是在我的 React 应用程序中遇到了问题。

这是 index.js 我在这个页面中使用 react-router-dom 我只需要显示 this.state.show 用于谁在主页中，因此在 login.js 请求 中，我创建了 'loginToken' 使用此代码 sessionStorage.setItem('loginToken ', '值')

现在我正在对 index.js 中的 sessionStorage.getItem('loginToken') 进行验证

一切正常，但我的问题是当我在主页中时此文本'Welcome Back' 不会自动出现我需要刷新主页看见了。我不知道为什么会这样。

是因为我使用了 componentWillMount 吗？

我尝试使用 componentDidMount 我遇到了同样的问题

import React, {Component} from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import Login from './users/login';
import home from './news/index';

class App extends Component {
    constructor(props){
        super(props);
        this.state = {
            show: false
        }
    }
    componentWillMount(){
        if(sessionStorage.getItem('loginToken')){
            this.setState({show: true});
        }else{
            this.setState({show: false});
        }
    }
    render() {
        return (
            <div>
                {this.state.show?
                <div>welcome back</div>:null
                }
            <Router>
                    <Switch>
                        <Route path="/login" component={Login} />
                        <Route path="/home" component={home} />
                    </Switch>
            </Router>
            </div>
        )
    }
}
export default App;

非常感谢你帮助我。

Answer 1

此问题是 componentWillMount 仅在应用首次运行时触发一次，因为它是树中最顶级的组件。

您应该考虑将一个函数作为 prop 传递到登录组件中，并在登录组件中调用它以触发父组件中的状态更改。您可以在此 article 中遵循一种方法来执行此操作.

最简单的方法是将欢迎文本移动到仪表板或主页路由中，这样它就会按照您的预期进行安装和卸载，并且您可以在该组件中使用当前的方法。