状态未映射到道具 react-redux [英] State not mapped to props react-redux

问题描述

我有一个简单的 LoginForm，我尝试从 redux 映射状态以进行反应.这是我来自 LoginForm.js 的代码:

 导出类 LoginForm 扩展 React.Component {使成为() {console.log("**** 表单打印存储");console.log(store.getState());console.log("**** 表格打印道具");console.log(this.props);if(this.props.loginObj.loginState=='true') {//这里出错console.log('是');}返回 (<div><div/>););}}const mapStateToProps = (状态) =>({loginObj : state.loginObj});const mapDispatchToProps = (调度) =>({登录，更改文本，});导出默认连接(mapStateToProps，mapDispatchToProps，)(登录表格);

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

loginObj:对象 { loginState="false", user="", password=""}

减速器:

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

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

<块引用>

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

更新:登录表单:

解决方案

首先你要正确你的 mapStateToProps 方法.它没有返回值.它从方法的语法中清楚地显示出来.

第二，你为什么使用 this.props.loginObj.loginState ?这个抽象层次是错误的.正如您提到的 loginObj 作为道具，那么为什么要在那里抽象 loginState 属性?这是行不通的.

在 redux 中，您应该将 props 限制为状态中的同一对象.例如，如果您想要 state 中的 todos，那么将 todos 作为 props 提及.如果你想要一些 todos 的属性，那么把它传递给 props(对于这个代码)或通过 children props.

我不了解您的商店，但是组件应该如下所示:

 导出类 LoginForm 扩展 React.Component {使成为() {console.log("**** 表单打印存储");console.log(store.getState());console.log("**** 表格打印道具");console.log(this.props);if (this.props.loginObj.loginState == 'true') {//这里出错console.log('是');}//对于这个问题，您可以在此时查看 -//store.getState().loginObj.propertyyouwant only if you have//在当前文件中导入主存储返回 (<div>

);}}const mapStateToProps = (状态) =>{返回 { loginObj: state.loginObj}};const mapDispatchToProps = (调度) =>{返回 {登录，更改文本，}};导出默认连接(mapStateToProps，mapDispatchToProps，)(登录表格);

I have a simple LoginForm and I try to map the states from redux to react. Here is my code from 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);

The reducer contains the property loginObj, if I print the store I see:

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

Reducer:

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

However when I try to access the props, it seems that this.props is empty.

this.props.loginObj.loginState - this.props is null

UPDATE: LoginForm:

解决方案

First of all your correct your mapStateToProps method . It doesn't have return value. It shows clearly from the syntax of the method.

Second why are you using this.props.loginObj.loginState ? This abstraction level is wrong. As you have mentioned loginObj as props, then why you should abstract loginState property there? It'll not work.

In redux, you should limit props to same object in the state. For example, if you want todos from state, then mention todos as props. If you want some property of todos, then pass down it to props(for this code) or via children props.

I don't know about your store but, the component should look like:

    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);

这篇关于状态未映射到道具 react-redux的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！