React Hook组件中redux-form初始值无法预填充，类组件正常问题求助

我来帮你排查这个问题——看起来你在使用Redux Form结合React Hooks时，表单初始值无法加载的核心原因是混合了本地状态管理和Redux Form的状态管理，导致初始值没有正确同步到Field组件中。下面是具体的分析和修复方案：

问题根源 #

你原本的代码里，用useState维护了activityName本地状态，但Redux Form的Field组件是和Redux Form内部的全局表单状态绑定的，而非你定义的本地state。这就导致：

1. 初始值只存在于本地state，没有同步到Redux Form的状态中
2. 手动绑定的onChange会干扰Redux Form的状态更新逻辑

修复后的代码 #

我们需要移除本地状态管理，让Redux Form全权负责表单字段的状态和初始值同步：

import { useSelector } from 'react-redux';
import { reduxForm, Field } from 'redux-form';
// 假设Form、Button、ConstructField是你项目中已导入的组件

const ActivitiesForm = ({ goBackButton, handleSubmit }) => {
  // 仅从Redux获取非表单相关的state（比如items），并映射表单初始值
  const { items, initialValues } = useSelector((state) => ({
    items: state.items,
    // 注意：确保映射后的字段名和Field组件的name属性一致
    initialValues: {
      activityName: state.data?.activityDescription || ''
    }
  }));

  // 处理表单提交逻辑
  const handleFormSubmit = (formValues) => {
    // 这里写你的提交逻辑，formValues包含activityName字段
    console.log('提交的表单数据:', formValues);
  };

  // 处理删除逻辑
  const handleDelete = () => {
    // 这里写删除操作的逻辑
    console.log('触发删除操作');
  };

  return (
    <div>
      <Form onSubmit={handleSubmit(handleFormSubmit)} className='ui form'>
        {/* Redux Form的Field会自动从initialValues获取初始值，无需手动绑定onChange */}
        <Field
          component={ConstructField('input')}
          label='Activity Name'
          name='activityName'
          placeholder='Activity Name'
        />
        <Button negative onClick={handleDelete}>
          Delete the Youth
        </Button>
      </Form>
    </div>
  );
};

// 配置Redux Form，enableReinitialize确保初始值变化时重新渲染表单
export default reduxForm({
  form: 'activityform',
  enableReinitialize: true,
})(ActivitiesForm);

关键注意点 #

1. 字段名匹配：确保initialValues中的键名和Field的name属性完全一致。比如上面代码中，我们把Redux里的activityDescription映射为表单的activityName，如果你的Redux数据字段本身就是activityName，直接取state.data?.activityName即可。
2. 移除本地状态：不需要用useState维护表单字段，Redux Form的Field组件会自动处理输入变化和状态同步。
3. enableReinitialize的作用：这个配置设为true后，当initialValues从Redux中更新时，表单会自动重新初始化，确保最新的初始值能加载到表单中。

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