登录后如何从 App.jsx 获取状态?

Question

我是 React 的新手，我的 App.jsx 中的状态有问题。 我的反应路由器代码在 App.js 中，登录默认页面(主页(后将加载。 我想在登录后读取状态以呈现我的标题页面(如果有用户加载状态(。 我遇到的问题是 App.jsx 中的状态仍然为空。

登录后，我的状态显示用户已填充，但 App.jsx 始终为空。 我尝试从道具和状态中提取"用户"，并且尝试将用户添加到mapState。

这是我的App.jsx中的内容：

import React from "react";
import { Router, Route } from "react-router-dom";
import { connect } from "react-redux";
import { history } from "../_helpers";
import { alertActions } from "../_actions";
import { PrivateRoute } from "../_components";
import { HomePage } from "../HomePage";
import { LoginPage } from "../LoginPage";
import { RegisterPage } from "../RegisterPage";
import Header from "../Header/Header";
class App extends React.Component {
constructor(props) {
super(props);
history.listen((location, action) => {
// clear alert on location change
this.props.clearAlerts();
});
}
render() {
const { alert } = this.props;
var user = this.state;
let header = null;
if (user) {
header = <Header />;
}
return (
<div>
{header}
<div className="jumbotron">
<div className="container">
<div className="col-sm-8 col-sm-offset-2">
{alert.message && (
<div className={`alert ${alert.type}`}>{alert.message}</div>
)}
<Router history={history}>
<div>
<PrivateRoute exact path="/" component={HomePage} />
<Route path="/login" component={LoginPage} />
<Route path="/register" component={RegisterPage} />
</div>
</Router>
</div>
</div>
</div>
</div>
);
}
}
function mapState(state) {
const { alert } = state;
return { alert };
}
const actionCreators = {
clearAlerts: alertActions.clear
};
const connectedApp = connect(
mapState,
actionCreators
)(App);
export { connectedApp as App };

任何帮助或更好的方法的建议将不胜感激。

Answer 1

你必须初始化状态拳头。 您有 2 个选项可以执行此操作：

1. 在你的构造函数中：调用this.state = {...}
2. 外部：组件调用状态中的某个位置 = {...}

这两个调用都会将您的状态初始化为默认状态，之后，将定义对 this.state 的调用。

希望这有帮助。

Answer 2

状态未初始化。小心点。 可以删除var user = this.state，然后可以初始化状态。此外，将user添加到state对象，而不是使用if (user)if (this.state.user)。然后你可以打电话给state.我认为这可能是你需要的。