关于 "Utils 不是构造函数 MuiPickersUtilsProvider"

问题描述

这个错误消息通常会在使用 material-ui-pickers 库的时候出现。错误提醒的意思是，你使用了错误的 Util 类来初始化 MuiPickers 提供者（MuiPickersUtilsProvider）。

错误原因

material-ui-pickers 依赖于一些 Util 类，如 date-fns 和 moment.js，用于处理日期时间相关的逻辑。如果你使用了错误的 Util 类，就会导致这个错误的出现。

解决方案

这个问题的解决方案很简单：确保你为 MuiPickers 提供者（MuiPickersUtilsProvider）选择正确的 Utils。

date-fns

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

function App() {
  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      // ...
    </MuiPickersUtilsProvider>
  );
}

export default App;

moment.js

import React from 'react';
import { MuiPickersUtilsProvider } from '@material-ui/pickers';
import MomentUtils from '@date-io/moment';

function App() {
  return (
    <MuiPickersUtilsProvider utils={MomentUtils}>
      // ...
    </MuiPickersUtilsProvider>
  );
}

export default App;

结论

这个错误的原因是使用了错误的 Util 类（DateFnsUtils 或 MomentUtils）。解决方案是选择正确的 Util 类来初始化 MuiPickers 提供者。