状态未映射到道具 react-redux答案

【问题标题】：State not mapped to props react-redux状态未映射到道具 react-redux
【发布时间】：2017-11-07 16:06:49
【问题描述】：

我有一个简单的 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);

reducer 包含属性 loginObj，如果我打印我看到的商店：

loginObj:   
    Object { loginState="false",  user="",  password=""}

减速机：

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

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

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

更新：登录表单：

【问题讨论】：

告诉我们LoginForm。
添加了 loginForm 的更新
日志this.props记录了什么？
打印：对象 {}
这很奇怪。我将不得不看到更多LoginForm。

标签： javascript reactjs redux

【解决方案1】：

首先你纠正你的mapStateToProps 方法。它没有返回值。从方法的语法上看就很清楚了。

第二个你为什么使用this.props.loginObj.loginState？这个抽象级别是错误的。正如你提到的 loginObj 作为道具，那么为什么你应该在那里抽象 loginState 属性？它不会起作用。

在 redux 中，你应该将 props 限制在 state 中的同一个对象上。例如，如果你想从 state 中获取 todos，那么将 todos 称为 props。如果你想要一些 todos 的属性，那么将它传递给 props（对于这个代码）或通过 children 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);

【讨论】：

【解决方案2】：

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


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

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

【讨论】：