首页 文章

使用React和Redux,Router时,状态是未定义的对象

提问于
浏览
2

我正在使用React和Redux,Router开发应用程序 . 但是现在我无法将状态设置(更新)到'mapStateToProps'函数状态 . 因此,减速器的args'动作'是'未定义的' . 我认为这个问题的原因是mapStateToProps的args不是从任何地方传递的 .

有谁知道如何将状态(来自客户端的数据输入)传递给mapStateToProps函数?

我的mapStateToProps函数就是这样编写的 .

const mapStateToProps = state=>{
console.log(state);  // this 'state' return undefined.
return {
loginform: state
}};

export default connect(mapStateToProps)(LoginForm)

这是我的代码 .

索引

/index.js

let store = createStore(showUsername,
window.devToolsExtension && window.devToolsExtension() );

ReactDOM.render(
<Provider store={store}>
<Router history={browserHistory}>
    <Route component={AppNavBar}>
        <IndexRedirect to='/login'>
        <Route path='/login' component={LoginForm} />
    </Route>
</Router>
</Provider>
,
document.getElementById('root')
);

组件

/Loginform.js

class LoginForm extends Component {
    ...
}

const mapStateToProps = state=>{
console.log(state);  // this 'state' return undefined.
return {
    loginform: state
}};


export default connect(mapStateToProps)(LoginForm)

ActionCreator

/actioncreator.js

export const showusername = 'showUsername';

    export const showUsername =(username,index)=>{
    console.log(username,index);
    return{
        type:showusername,
        username,
        payload:index
    }

    };

#Reducer

/reducer.js

const initialState = {
            username: '',
            password: '',
            submit: false,
            //request: 'self',
            showselectfield: false
        };

    export default function showUsername(state = initialState, action) {
    switch (action.type) {
      case type.showusername:
      return (
          Object.assign({},initialState ,{username:action.username,password:action.password})
          );

    default:
      return state
  }
}

谢谢,

1 回答

  • 0

    在您的reducer中,当您检查触发的操作时,您正在检查 type.showusername ,但由于您在切换情况下已经有 action.type ,因此您应该检查字符串值,即 "showusername"

    const initialState = {
                username: '',
                password: '',
                submit: false,
                //request: 'self',
                showselectfield: false
            };
    
        export default function showUsername(state = initialState, action) {
        switch (action.type) {
          case "showusername":
          return (
              Object.assign({},state ,{username:action.username,password:action.password})
              );
    
        default:
          return state
      }
    }
    

相关问题