Redux-form-Material-UI DatePicker组件渲染报错求助

我之前也碰到过一模一样的问题，这个错误本质是DatePicker没被正确识别为有效的React组件，大概率是组件导入方式、版本兼容或者props传递不匹配导致的。下面给你几个可行的解决方案：

1. 改用render prop方式渲染DatePicker #

redux-form的Field直接传component时，对部分Material-UI组件的事件处理兼容不佳——比如DatePicker的onChange参数格式和redux-form期望的不一致。用render函数手动处理事件映射就能解决：

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import { TextField, DatePicker, SelectField } from 'redux-form-material-ui';

class InputForm extends Component {
  render() {
    return(
      <form>
        <div>
          <Field
            name="eventDate"
            format={null}
            render={({ input, meta }) => (
              <DatePicker
                {...input}
                hintText="What day is the event?"
                onChange={(event, selectedDate) => input.onChange(selectedDate)}
              />
            )}
          />
        </div>
      </form>
    )
  }
}

InputForm = reduxForm({ form: 'contact' })(InputForm);
export default InputForm;

关键在于手动把DatePicker的onChange事件里的日期值传递给redux-form的input.onChange——默认情况下DatePicker的onChange会返回(event, date)两个参数，而redux-form只需要日期值本身。

2. 检查版本兼容性 #

务必确保redux-form-material-ui和material-ui版本兼容：

• 若使用material-ui v1.x及以上版本，需要安装redux-form-material-ui ^6.0.0及以上的适配版本
• 旧版redux-form-material-ui（如v5.x）仅适配material-ui v0.x，混用会导致组件导出异常

可以用以下命令查看当前版本：

npm list redux-form-material-ui material-ui

如果版本不匹配，卸载后重新安装对应版本：

# 安装适配material-ui v1+的最新版本
npm uninstall redux-form-material-ui
npm install redux-form-material-ui@latest

3. 确认组件导出与导入是否正确 #

部分情况下，redux-form-material-ui的DatePicker导出方式可能有变化，你可以尝试直接从material-ui导入原始组件，再用redux-form的适配工具包裹：

// 调整导入路径
import { DatePicker } from 'material-ui/DatePicker';
import { reduxFormMaterialUI } from 'redux-form-material-ui';

// 将原始组件转换为redux-form兼容版本
const ReduxFormDatePicker = reduxFormMaterialUI(DatePicker);

// 在Field中使用适配后的组件
<Field name="eventDate" component={ReduxFormDatePicker} format={null} hintText="What day is the event?"/>

这种方式能确保你正确将Material-UI原始组件转换为redux-form可识别的格式。

测试一下上面的方案，应该就能解决这个报错了。

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