Question

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

这是index.js我在此页面中使用react-router-dom我只需要在主页中显示this.state.show，所以在login.js request我已使用此代码'loginToken'

创建sessionStorage.setItem('loginToken', 'Value')

现在我正在对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传递给Login组件，并在login组件中调用它以在父组件中触发状态更改。您可以按照article中的方法执行此操作。

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

如果功能不是最新的反应

1 个答案: