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

我还没有反应过来，我的App.jsx中的State出现了问题。我的react路由器代码位于App.js中，登录默认页面（主页）后将加载该代码。我想在登录后读取状态，以呈现我的标题页，如果有一个用户加载在状态中。我遇到的问题是App.jsx中的状态仍然为null

登录后，“我的状态”显示用户已填充，但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 };

从“React”导入React；
从“react Router dom”导入{Router，Route}；
从“react redux”导入{connect}；
从“./_helpers”导入{history}”；
从“./_actions”导入{alertActions}”；
从“./_组件”导入{privaterout}”；
从“./HomePage”导入{HomePage}；
从“./LoginPage”导入{LoginPage}；
从“./RegisterPage”导入{RegisterPage}；
从“./页眉/页眉”导入页眉；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
历史。聆听（（位置、动作）=>{
//位置更改时清除警报
this.props.clearAlerts（）；
});
}
render（）{
const{alert}=this.props；
var user=this.state；
让header=null；
如果（用户）{
标题=；
}
返回(
{header}
{alert.message&&(
{alert.message}
)}
);
}
}
函数映射状态（状态）{
const{alert}=状态；
返回{alert}；
}
const actionCreators={
clearAlerts:alertActions.clear
};
const connectedApp=connect(
mapState，
动作创造者
)（App）；
导出{connectedApp as App}；

---

如果您能提供任何帮助或建议更好的方法，我们将不胜感激。

您必须初始化国家拳头。 您有两个选项可以执行此操作：

在构造函数中：调用this.state={…}

外部：组件调用状态={…}

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

---

希望这有帮助。

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

在构造函数中：调用this.state={…}

外部：组件调用状态={…}

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

---

希望这有帮助。

状态未初始化。小心点

var user=this.state

可以删除，然后可以初始化状态。另外，将

user

添加到

state

对象中，并使用

if（user）

代替

if（this.state.user）

。然后您可以调用

状态

。我想这可能是您需要的。

状态未初始化。小心点

var user=this.state

可以删除，然后可以初始化状态。另外，将

user

添加到

state

对象中，并使用

if（user）

代替

if（this.state.user）

。然后您可以调用

状态

。我想这可能就是您需要的。

谢谢您的回复。因此，在我的App.js构造函数中，我需要添加这个.state={user:null}？好的，我将这个.state={user:null}添加到我的构造函数中，但是当我在App.js render方法中使用console.log（this.state.user）时，它在登录后仍然为null。render（）{const{alert，user}=this.props；let header=null；console.log（this.state.user）；您混合使用state和props。是要将用户存储在state中还是只从redux传递它？我建议使用第二种方法。如果您只使用apss，则必须使用this.props.user访问用户。感谢您的响应。因此，在我的App.js构造函数中，我需要添加这个。state={user:null}？好的，我添加了这个。state={user:null}但当我在App.js render方法中使用console.log（this.state.user）时，它在login.render（）之后仍然为null，{const{alert，user}=this.props；let header=null；console.log（this.state.user）；您可以混合使用状态和道具。是要将用户存储在状态中，还是只从redux传递？我建议使用第二种方法。如果只是apss，则必须使用此.props.user访问用户。