"コンポーネントがカスタム小道具を渡したときに '未定義の要求'プロパティを読み取ることができません

Question

私は問題がある可能性があります反応の定型句または" redux-form/immutable "から、誰かが私を助けることを願っています。

カスタムコンポーネントをフォームコンポーネントに配置しようとしましたが、送信時にエラーメッセージが表示されます。ここで

は私のコードです：routes.js

... 
{ 
     path: '/signup', 
     name: 'signup', 
     getComponent(nextState, cb) { 
     const importModules = Promise.all([ 
      import('containers/SignupPage/reducer'), 
      import('containers/SignupPage/sagas'), 
      import('containers/SignupPage'), 
     ]); 

     const renderRoute = loadModule(cb); 

     importModules.then(([reducer, sagas, component]) => { 
      injectReducer('signup', reducer.default); 
      injectSagas(sagas.default); 
      renderRoute(component); 
     }); 
     }, 
    } 
... 

上

import React from 'react'; 
import { Form, Icon } from 'semantic-ui-react'; 
import { PropTypes } from 'prop-types'; 
import { Field, reduxForm, reset } from 'redux-form/immutable'; 
import { connect } from 'react-redux'; 

import { ReduxFormInput, ReduxFormCheckbox } from '../../components/ReduxFormInput'; 
import { signupSync, passStrength } from '../../components/Validate'; 
import StyledButton from '../../components/StyledButton'; 
import AcceptTerms from './acceptTerms'; 
import signupRequest from './actions'; 

class Signup extends React.Component { 
    static propTypes = { 
    handleSubmit: PropTypes.func.isRequired, 
    submitting: PropTypes.bool.isRequired, 
    signupRequest: PropTypes.func, 
    signup: PropTypes.shape({ 
     requesting: PropTypes.bool, 
     successful: PropTypes.bool, 
     messages: PropTypes.array, 
     errors: PropTypes.array, 
    }), 
    } 

    submit(values, dispatch) { 
    console.log(values); 
    this.props.signupRequest(values); // will be undefined 'props' after submit 
    } 

    render() { 
    const { 
     handleSubmit, 
     submitting, 
     signup: { 
     requesting, 
     successful, 
     messages, 
     errors, 
     }, 
    } = this.props; 

    return (
     <Form onSubmit={handleSubmit(this.submit)} > 
     <Form.Field> 
      <Field 
      type="text" 
      name="accountName" 
      component={ReduxFormInput} 
      icon="user outline" 
      label="Tên tài khoản" 
      placeholder="Tên tài khoản của bạn" 
      /> 
     </Form.Field> 
     <Form.Field > 
      <Field 
      type="email" 
      name="email" 
      component={ReduxFormInput} 
      icon="mail outline" 
      label="Email" 
      placeholder="Email của bạn" 
      /> 
     </Form.Field> 
     <Form.Field required > 
      <Field 
      type="password" 
      name="password" 
      component={ReduxFormInput} 
      icon="lock" 
      label="Mật khẩu" 
      placeholder="Nhập mật khẩu" 
      warn={passStrength} 
      /> 
     </Form.Field> 
     <Form.Field required > 
      <Field 
      type="password" 
      name="confirmPassword" 
      component={ReduxFormInput} 
      icon="lock" 
      label="Xác nhận Mật khẩu" 
      placeholder="Xác nhận lại mật khẩu" 
      /> 
     </Form.Field> 
     <Form.Field> 
      <Field 
      defaultChecked 
      type="checkbox" 
      name="confirm" 
      checkboxLabel="Tôi muốn nhận thông tin thông qua email, SMS, hoặc điện thoại." 
      component={ReduxFormCheckbox} 
      /> 
     </Form.Field> 
     {AcceptTerms} 
     <div> 
      <StyledButton primary fluid type="submit" disabled={submitting} > 
      <Icon name="add user" /> 
      Đăng ký tài khoản 
      </StyledButton> 
     </div> 
     </Form> 
    ); 
    } 
} 

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

const connected = connect(mapStateToProps, { signupRequest })(Signup); 

const formed = reduxForm({ 
    form: 'signup', 
    validate: signupSync, 
    onSubmitSuccess: afterSubmit, 
})(connected); 

const afterSubmit = (result, dispatch) => dispatch(reset('signup')); 

export default formed; 

マイ減速

import { SubmissionError } from 'redux-form/immutable'; 
import { 
    SIGNUP_REQUESTING, 
    SIGNUP_SUCCESS, 
    SIGNUP_ERROR, 
} from './constants'; 

const initialState = { 
    requesting: false, 
    successful: false, 
    errors: [], 
    messages: [], 
}; 

const reducer = function signupReducer(state = initialState, action) { 
    switch (action.type) { 
    case SIGNUP_REQUESTING: 
     return { 
     requesting: true, 
     successful: false, 
     errors: [], 
     messages: [{ 
      body: 'Signing up...', 
      time: new Date(), 
     }], 
     }; 

    case SIGNUP_SUCCESS: 
     return { 
     requesting: false, 
     successful: true, 
     errors: [], 
     messages: [{ 
      body: `Successfully created account for ${action.response.email}`, 
      time: new Date(), 
     }], 
     }; 

    case SIGNUP_ERROR: 
     return { 
     requesting: false, 
     successful: false, 
     messages: [], 
     errors: new SubmissionError({ 
      email: 'failed', 
      _error: 'failed', 
     }), 
     }; 

    default: 
     return state; 
    } 
}; 

export default reducer; 

を注入リデューサそれから私はこのようなエラー画面を得ました。

TypeError: Cannot read property 'requesting' of undefined 
Signup.render 
/Users/son/Desktop/we-mak/app/containers/SignupPage/signupForm.js 
Signup.tryRender 
http://localhost:3000/main.js:1388:1 
Signup.proxiedMethod 
http://localhost:3000/main.js:1356:1 
eval 
webpack:///./~/react-dom/lib/ReactCompositeComponent.js?:796:21 
measureLifeCyclePerf 
webpack:///./~/react-dom/lib/ReactCompositeComponent.js?:75:12 
ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext 
webpack:///./~/react-dom/lib/ReactCompositeComponent.js?:795:25 
ReactCompositeComponentWrapper._renderValidatedComponent 
webpack:///./~/react-dom/lib/ReactCompositeComponent.js?:822:32 
ReactCompositeComponentWrapper._updateRenderedComponent 
webpack:///./~/react-dom/lib/ReactCompositeComponent.js?:746:36 
ReactCompositeComponentWrapper._performComponentUpdate 
webpack:///./~/react-dom/lib/ReactCompositeComponent.js?:724:10 
ReactCompositeComponentWrapper.updateComponent 
webpack:///./~/react-dom/lib/ReactCompositeComponent.js?:645:12 

私はので、私はそれが定型から引き起こす可能性が推測が、私はそれを設定への十分なWebPACKの経験を持っていない反応-ホットローダーを使用していないことが反応し、定型に気づきます。

Answer 1

このエラーメッセージは、signupプロパティが未定義であることを意味します。これは、状態にsignupプロパティがないか、そのプロパティが定義されていない場合に発生する可能性があります。減速機を見てください。