React Material-UI DatePicker报错：Cannot read property 'date' of undefined

我看了你遇到的这个问题——在Storybook里使用Material-UI的DatePicker时出现TypeError: Cannot read property 'date' of undefined，这个错误其实很常见，核心原因是Material-UI Pickers组件依赖第三方日期处理适配器，但你没有配置它。

先拆解下问题：你直接导入并使用了DatePicker，但这个组件本身并不自带日期解析、格式化等核心逻辑，它需要借助MuiPickersUtilsProvider和对应的日期库适配器才能正常工作。当组件内部尝试调用日期处理方法时，找不到对应的适配器实例，就会抛出这个“无法读取undefined的'date'属性”的错误。

解决步骤： #

1. 安装日期适配器依赖

首先你需要安装一个日期库和对应的适配器包，比如常用的date-fns组合：

npm install @date-io/date-fns@1.x date-fns
# 或者用yarn
yarn add @date-io/date-fns@1.x date-fns

注意：如果你用的是Material-UI Pickers v3版本，要安装@date-io/date-fns的1.x版本；如果是v4+，则对应2.x版本。

2. 修改组件代码，添加适配器包裹

你需要导入MuiPickersUtilsProvider和适配器，然后用它包裹你的DatePicker组件，同时别忘了补上缺失的handleDateChange方法：

import React, { PureComponent } from 'react';
import { DatePicker, MuiPickersUtilsProvider } from 'material-ui-pickers';
import DateFnsUtils from '@date-io/date-fns'; // 导入date-fns适配器

class DatePickers extends PureComponent {
  state = {
    selectedDate: new Date(),
  }

  // 补上日期变更的处理方法
  handleDateChange = (date) => {
    this.setState({ selectedDate: date });
  };

  render() {
    console.log(this.state);
    const { selectedDate } = this.state;
    return (
      // 用适配器提供者包裹DatePicker
      <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <div>
          <DatePicker
            label="Basic example"
            value={selectedDate}
            onChange={this.handleDateChange}
            animateYearScrolling={false}
          />
        </div>
      </MuiPickersUtilsProvider>
    )
  }
}

export default DatePickers;

3. （可选）在Storybook全局配置适配器

如果你的Storybook里有很多使用DatePicker的组件，不想每个组件都重复写MuiPickersUtilsProvider，可以在Storybook的预览文件（.storybook/preview.js）里全局配置：

import { MuiPickersUtilsProvider } from 'material-ui-pickers';
import DateFnsUtils from '@date-io/date-fns';

export const decorators = [
  (Story) => (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <Story />
    </MuiPickersUtilsProvider>
  ),
];

这样修改后，你的DatePicker就能在Storybook里正常渲染和工作了，那个类型错误也会消失。

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