Redux Form中React Date Picker无法将出生日期存入Redux Store求助

看起来你的日期选择器组件逻辑已经接近正确了，问题大概率出在moment值的解析和传递的一致性上。咱们一步步来修正：

核心问题分析 #

你在onChange里把日期格式化成了"YYYY/MM/DD"的字符串，但在selected属性里解析input.value时，没有指定对应的格式，moment可能会因为自动解析不一致导致值不匹配，或者Redux Form没有正确接收到变更通知。

修正后的组件代码 #

import moment from 'moment'; // 确保已经导入moment

const renderBirthday = ({ input, label, meta: { touched, error }, ...custom }) => {
  // 解析input.value时指定格式，和onChange输出的格式保持一致
  const selectedDate = input.value ? moment(input.value, "YYYY/MM/DD") : null;

  return (
    <div>
      {label && <label>{label}</label>} {/* 可选：加上标签提升用户体验 */}
      <DatePicker
        {...input}
        dateForm="MMMM d, yyyy h:mm aa"
        selected={selectedDate}
        // 直接传递格式化后的字符串给input.onChange，确保格式统一
        onChange={(date) => {
          if (date) {
            input.onChange(moment(date).format("YYYY/MM/DD"));
          } else {
            input.onChange(null); // 处理清空日期的情况
          }
        }}
        {...custom} // 别忘了把自定义属性传递给DatePicker
      />
      {/* 可选：显示错误提示 */}
      {touched && error && <span className="error">{error}</span>}
    </div>
  );
};

关键修改点 #

• 统一moment解析格式：在selected属性里，解析input.value时明确指定格式"YYYY/MM/DD"，和onChange输出的格式保持一致，避免moment自动解析出现偏差。
• 处理空值情况：当用户清空日期选择器时，主动传递null给input.onChange，确保Redux Store能正确更新为空值。
• 传递自定义属性：把...custom传递给DatePicker，避免丢失可能的自定义配置（比如禁用日期、占位符等）。
• 可选的用户体验优化：加上标签和错误提示，让组件更完整。

验证步骤 #

修改完代码后，打开Redux DevTools，选择日期后查看form对应的state，确认dateOfBirth字段是否和你选择的日期格式一致（YYYY/MM/DD）。如果能看到值更新，说明同步成功了。

另外，确保你的表单组件已经正确用reduxForm高阶组件包裹，并且配置了对应的form名称，比如：

import { reduxForm } from 'redux-form';

const UserProfileForm = reduxForm({
  form: 'userProfile' // 表单唯一标识
})(YourFormComponent);

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