在函数式组件中为Redux Form设置初始值的方法

Got it, let's break down why you're hitting that "user is undefined" error and fix it with a few straightforward solutions.

Why Your Original Code Failed #

When you tried setting initialValues: { name: user.name } directly in the reduxForm config, you ran into an error because that config object runs when the component is first defined, not when it actually renders with props. At definition time, the component hasn't received its user prop yet—so user doesn't exist in that scope.

Solution 1: Pass Initial Values as a Prop From the Parent #

The easiest fix is to pass the initial values when you use the UpdateUser component in your parent code:

// In your parent component where you render UpdateUser
<UpdateUser 
  user={yourUserInstance}
  initialValues={{ name: yourUserInstance.name }}
/>

You can remove the initialValues line from your reduxForm configuration entirely—Redux Form will automatically pick up the initialValues prop you pass in.

Solution 2: Use a Function for initialValues in the Config #

Redux Form lets you set initialValues as a function that takes the component's props as an argument. This way, you can access the user prop dynamically when the component renders:

import React from 'react';
import { Field, reduxForm } from 'redux-form';
import { InputText } from './shared';
import { Row, Col, Button } from 'react-bootstrap';

const required = value => (value ? undefined : 'Required');

let UpdateUser = ({ user, handleSubmit }) => (
  <div className="content">
    <form onSubmit={handleSubmit}>
      <Row>
        <Col xs={4} sm={4} md={4}>
          <Field 
            name="name" 
            component={InputText} 
            type="text" 
            validate={[required]} 
            label="Name" 
          />
        </Col>
      </Row>
      <Row>
        <Col xs={4} sm={4} md={4}>
          <Button type="submit" className="primary">Submit</Button>
        </Col>
      </Row>
    </form>
  </div>
);

UpdateUser = reduxForm({
  form: 'updateUser',
  // Use a function to access the component's props
  initialValues: (props) => ({ 
    name: props.user?.name // Optional chain to avoid errors if user loads asynchronously
  })
})(UpdateUser);

export default UpdateUser;

The optional chain (?.) here is helpful if your user prop is loaded asynchronously (like from an API call)—it prevents errors if user is undefined on the first render.

Solution 3: Enable Reinitialization for Dynamic User Updates #

If your user prop might change after the component mounts (e.g., if you edit the user elsewhere and need the form to sync), add enableReinitialize: true to the reduxForm config. This will refresh the form's initial values whenever the user prop changes:

UpdateUser = reduxForm({
  form: 'updateUser',
  enableReinitialize: true, // This triggers a reinitialization when props change
  initialValues: (props) => ({ 
    name: props.user?.name 
  })
})(UpdateUser);

This ensures that if the user object gets updated later, the form will automatically reflect the new name value.

内容的提问来源于stack exchange，提问作者Ashy Ashcsi