Javascript 未映射到props react redux的状态

我有一个简单的LoginForm，我尝试从redux映射状态以做出反应。以下是我在LoginForm.js中的代码：

 export class LoginForm extends React.Component {
    render() {

            console.log("**** FORM print store");
            console.log(store.getState());
            console.log("**** FORM print props");
            console.log(this.props);

            if(this.props.loginObj.loginState=='true') { // error here
                console.log('yes');
            }

            return (
            <div><div/>);
            );
          }
      }

const mapStateToProps = (state) => ({
    loginObj : state.loginObj
});

const mapDispatchToProps = (dispatch) => ({
  doLogin,
  changeText,
});

export default connect(  
  mapStateToProps,
  mapDispatchToProps,
)(LoginForm);

减速器：

const reducers = combineReducers({
    loginObj: loginReducer
});
...

但是，当我尝试访问道具时，似乎this.props是空的

this.props.loginObj.loginState-this.props为空

更新：

---

LoginForm:

首先，请更正您的

MapStateTops

方法。它没有返回值。从方法的语法可以清楚地看出

  import {bindActionCreators} from 'redux'; //must include


  function mapStateToProps(state){
         return {    
           loginObj : state.loginObj
          }
        }

   function mapDispatchToProps(dispatch){
       return bindActionCreators({doLogin,changeText},dispatch)
    };

第二，为什么要使用

this.props.loginObj.loginState

？这个抽象级别是错误的。正如您提到的作为道具的

loginObj

，那么为什么要在那里抽象

loginState

属性呢？这行不通

在redux中，应该将道具限制为状态中的同一对象。例如，如果您想从州政府获得TODO，请将TODO作为道具。如果您想要TODO的某些属性，那么将其传递给props（对于此代码）或通过子道具

我不知道您的商店，但是，该组件应该如下所示：

    export class LoginForm extends React.Component {
    render() {

    console.log("**** FORM print store");
    console.log(store.getState());
    console.log("**** FORM print props");
    console.log(this.props);

    if (this.props.loginObj.loginState == 'true') { // error here
      console.log('yes'); 
    }
      // for this issue you could view at this point - 
      // store.getState().loginObj.propertyyouwant only if you have 
      // imported main store in this current file
    return (
      <div>
      </div>
            );
          }
      }

    const mapStateToProps = (state) => {
      return { loginObj: state.loginObj}    
    };

    const mapDispatchToProps = (dispatch) =>
    {
     return {
      doLogin,
      changeText,}
    };


    export default connect(  
     mapStateToProps,
     mapDispatchToProps,
    )(LoginForm);

导出类LoginForm扩展React.Component{
render（）{
console.log（“****表单打印存储”）；
log（store.getState（））；
console.log（“****表单打印道具”）；
console.log（this.props）；
如果（this.props.loginObj.loginState=='true'）{//error here
console.log（'yes'）；
}
//对于这个问题，您可以在这一点上看到-
//store.getState（）.loginObj.propertyyouwant仅当您有
//已在此当前文件中导入主存储
返回(
);
}
}
常量mapStateToProps=（状态）=>{
返回{loginObj:state.loginObj}
};
const mapDispatchToProps=（调度）=>
{
返回{
多洛金，
changeText，}
};
导出默认连接（
MapStateTops，
mapDispatchToProps，
)（LoginForm）；

首先，请更正您的

MapStateTrops

方法。它没有返回值。从方法的语法可以清楚地看出

第二，为什么要使用

this.props.loginObj.loginState

？这个抽象级别是错误的。正如您提到的作为道具的

loginObj

，那么为什么要在那里抽象

loginState

属性呢？这行不通

在redux中，应该将道具限制为状态中的同一对象。例如，如果您想从州政府获得TODO，请将TODO作为道具。如果您想要TODO的某些属性，那么将其传递给props（对于此代码）或通过子道具

我不知道您的商店，但是，该组件应该如下所示：

    export class LoginForm extends React.Component {
    render() {

    console.log("**** FORM print store");
    console.log(store.getState());
    console.log("**** FORM print props");
    console.log(this.props);

    if (this.props.loginObj.loginState == 'true') { // error here
      console.log('yes'); 
    }
      // for this issue you could view at this point - 
      // store.getState().loginObj.propertyyouwant only if you have 
      // imported main store in this current file
    return (
      <div>
      </div>
            );
          }
      }

    const mapStateToProps = (state) => {
      return { loginObj: state.loginObj}    
    };

    const mapDispatchToProps = (dispatch) =>
    {
     return {
      doLogin,
      changeText,}
    };


    export default connect(  
     mapStateToProps,
     mapDispatchToProps,
    )(LoginForm);

导出类LoginForm扩展React.Component{
render（）{
console.log（“****表单打印存储”）；
log（store.getState（））；
console.log（“****表单打印道具”）；
console.log（this.props）；
如果（this.props.loginObj.loginState=='true'）{//error here
console.log（'yes'）；
}
//对于这个问题，您可以在这一点上看到-
//store.getState（）.loginObj.propertyyouwant仅当您有
//已在此当前文件中导入主存储
返回(
);
}
}
常量mapStateToProps=（状态）=>{
返回{loginObj:state.loginObj}
};
const mapDispatchToProps=（调度）=>
{
返回{
多洛金，
changeText，}
};
导出默认连接（
MapStateTops，
mapDispatchToProps，
)（LoginForm）；

Show-us

LoginForm

。添加了一个LoginForm更新，日志

this.props

log？打印：Object{}这很奇怪。我将要看到更多的

LoginForm

。向我们展示

LoginForm

。添加了一个LoginForm更新日志

这是什么。道具
log？打印：Object{}这很奇怪。我将不得不看到更多的
LoginForm
。