Failed prop type: The prop `actions` is marked as required in `Testing`, but its value is `undefined`

前端 未结 2 1856
暖寄归人
暖寄归人 2021-01-25 10:09

I am creating a simple login form using React and Redux. My app.js is:

import React from \'react\';
import { render } from \'react-dom\';
import Inp         


        
2条回答
  •  臣服心动
    2021-01-25 10:56

    The function handleChange should get only an event as a parameter.
    handleChange(e) this event is attached to the target element, so you can access its values via e.target.value;
    With that said, do not bind the handlers in the render function. do it in the constructor as it will create a new instance of the handler on each render call. bad for performance. As for the redux flow, you should use connect.
    export default connect(mapStateToProps, mapDispatchToProps)(Testing).
    EDIT
    After another look at your code, beside the fact that you didn't use connect to connect the component to redux, you are mapping a wrong object to mapDispatchToProps.
    In this code you are using loginAction:

    function mapDispatchToProps(dispatch) {
      return {
        actions: bindActionCreators(loginAction, dispatch)
      }
    }  
    

    But you never imported it, you used a name import:
    import { loginSuccess, loginRequest, login } from '../actions/loginAction';
    One possible way to import everything and pass it to mapDispatchToProps is this:
    import * as loginAction from '../actions/loginAction';
    Another mistake you made is naming this object with different name on propTypes, you named it actions and not loginAction

    Testing.propTypes = {
      actions: PropTypes.object.isRequired,
    
    };
    

    You will need the same name:

    Testing.propTypes = {
      loginAction: PropTypes.object.isRequired,
    
    };
    

    And again don't forget to connect!!

提交回复
热议问题