Redux form &引用;无法读取属性';请求';“未定义”的定义;将自定义道具传递到组件时

Redux form &引用;无法读取属性';请求';“未定义”的定义;将自定义道具传递到组件时,redux-form,react-boilerplate,Redux Form,React Boilerplate,我从react样板文件或“redux form/immutable”中发现一个问题,希望有人能帮我解决 我尝试将一些自定义道具放入表单组件中,这将在提交时打印出错误消息 这是我的密码: import React from 'react'; import { Form, Icon } from 'semantic-ui-react'; import { PropTypes } from 'prop-types'; import { Field, reduxForm, reset } from 'r

我从react样板文件或“redux form/immutable”中发现一个问题,希望有人能帮我解决

我尝试将一些自定义道具放入表单组件中,这将在提交时打印出错误消息

这是我的密码:

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;
在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);
        });
      },
    }
...
然后我得到了一个这样的错误屏幕

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

我注意到react样板并没有使用react hot loader,所以我猜这可能是因为react样板,但我没有足够的网页包经验来配置它

此错误消息表示您的
signup
属性未定义,如果您所在的州没有
signup
属性或该属性未定义,则可能发生这种情况。看看你的减速机。

是的,我做了,只是在上面添加了一些代码,我不知道如果我的减速机出现问题怎么办:(
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