Simple Redux-Form组件提交返回undefined问题咨询

Hey there! Let's walk through the most common issues that might be causing your Redux-Form submission to log undefined instead of your form data. Here are the key things to check:

1. You're not wrapping your submit handler with handleSubmit #

Redux-Form relies on its handleSubmit function to collect form values and pass them to your custom submit logic. If you call your submit function directly, it won't receive any form data.

Wrong way:

<form onSubmit={this.yourSubmitHandler}>

Correct way:

// Make sure to import handleSubmit from redux-form first
import { handleSubmit } from 'redux-form';

<form onSubmit={handleSubmit(this.yourSubmitHandler)}>

2. Your form isn't connected to Redux properly #

If you skip wrapping your component with the reduxForm() higher-order component (HOC), the form won't sync with the Redux store, so no values will be captured on submit.

How to fix it:

import { reduxForm } from 'redux-form';

const YourFormComponent = (props) => {
  // Your form JSX here
};

// Wrap your component with reduxForm and give it a unique form name
export default reduxForm({
  form: 'simpleForm' // Replace with your form's unique identifier
})(YourFormComponent);

Also double-check that you've added the Redux-Form reducer to your root reducer using formReducer from redux-form.

3. Your submit handler doesn't accept the values parameter #

Even if you use handleSubmit, if your custom submit function doesn't take the form values as an argument, you'll get undefined when you try to log them.

Wrong way:

const yourSubmitHandler = () => {
  console.log('Form data:', values); // values is not defined here!
};

Correct way:

const yourSubmitHandler = (values) => {
  console.log('Form data:', values); // This should log your form fields now
};

4. Your form fields are missing the name prop #

Redux-Form uses the name prop on <Field> components to map input values to the form state. Without this prop, the library can't track or collect the input data.

Wrong way:

<Field component="input" type="text" placeholder="Email" />

Correct way:

<Field name="email" component="input" type="text" placeholder="Email" />

5. You're not passing handleSubmit as a prop to your component #

If you're using a class component or manual prop passing, ensure that handleSubmit (provided by the reduxForm HOC) is being passed down to your form component.

Example:

const YourFormComponent = ({ handleSubmit }) => {
  return (
    <form onSubmit={handleSubmit(yourSubmitHandler)}>
      {/* Your form fields go here */}
    </form>
  );
};

Start by checking these points one by one—most of the time, the issue is a missing prop or incorrect wrapping of the submit handler. If you can share snippets of your form component and submit handler code, we can narrow it down even further!

内容的提问来源于stack exchange，提问作者R. Kohlisch