使用redux-form提交时遇'Cannot read props of undefined'错误求助

Hey there! Let's break down this Cannot read props of undefined error you're hitting with redux-form—since you mentioned you're new to Redux, I'll keep this clear and actionable, especially since your componentDidMount GET dispatch works (so your core Redux setup is likely solid!).

Common Causes & Fixes #

1. You mixed up the order of reduxForm() and connect() HOCs

This is one of the most common mistakes for redux-form beginners. The reduxForm() wrapper needs to be applied inside the connect() call, not the other way around. If you flip them, redux-form's props won't be injected into your component properly.

✅ Correct order:

import { reduxForm } from 'redux-form';
import { connect } from 'react-redux';

// First wrap your component with reduxForm
const FormWithRedux = reduxForm({ form: 'yourUniqueFormName' })(YourFormComponent);

// Then connect to Redux
export default connect(mapStateToProps, mapDispatchToProps)(FormWithRedux);

❌ Wrong order (will break props):

// Don't do this!
const ConnectedForm = connect(...)();
export default reduxForm(...)(ConnectedForm);

2. Your submit handler isn't bound to this

If you define your submit function as a regular class method (not an arrow function), this will be undefined inside it—so this.props will throw the error you're seeing.

Fix it in one of two ways:

• Use an arrow function for the handler:

  onSubmit = (values) => {
    this.props.dispatch(yourSubmitAction(values));
  };
  

• Bind this in your constructor:

  constructor(props) {
    super(props);
    this.onSubmit = this.onSubmit.bind(this);
  }
  
  onSubmit(values) {
    this.props.dispatch(yourSubmitAction(values));
  }
  

3. You forgot to add redux-form's reducer to your root reducer

Redux-form requires its own reducer to manage form state. If you skip this step, the form can't access the props it needs to function.

Add it to your root reducer like this:

import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';
import yourOtherReducer from './yourOtherReducer';

const rootReducer = combineReducers({
  yourOtherReducer,
  form: formReducer // This line is NON-NEGOTIABLE for redux-form!
});

export default rootReducer;

4. You're accidentally accessing props on an undefined value in your submit handler

Double-check your submit function—if you're trying to access something like values.someField.props (where someField might be undefined), or mixing up values with props, that'll trigger the error.

For example, don't do this:

// ❌ Bad
onSubmit(values) {
  // If values.user is undefined, this will throw "Cannot read props of undefined"
  this.props.dispatch(submitUser(values.user.props));
}

Instead, validate the values first:

// ✅ Better
onSubmit(values) {
  if (values.user) {
    this.props.dispatch(submitUser(values.user));
  }
}

5. You're accessing uninitialized Redux state in your component

If your render method tries to access a nested prop from Redux state that hasn't been set yet (e.g., this.props.formState.errors.email when formState is still undefined), you'll get this error. Use optional chaining (?.) to guard against it:

// Instead of this:
{this.props.formState.errors.email}

// Do this:
{this.props.formState?.errors?.email}

Quick Working Example to Reference #

Here's a minimal, correct setup to compare against your code:

import React from 'react';
import { reduxForm, Field } from 'redux-form';
import { connect } from 'react-redux';
import { submitFormData } from '../actions';

const MyForm = ({ handleSubmit }) => {
  const onSubmit = (values) => {
    submitFormData(values);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Field name="username" component="input" type="text" placeholder="Username" />
      <button type="submit">Submit</button>
    </form>
  );
};

const ReduxForm = reduxForm({ form: 'userRegistration' })(MyForm);
export default connect(null, { submitFormData })(ReduxForm);

Start by checking the first two points (HOC order and this binding)—those are the most likely culprits given your GET request works.

内容的提问来源于stack exchange，提问作者Abhishek Kumar Pandey