如何解决此错误 Can not find utils in context

Question

我正在研究 Materialui，在这里我试图显示日期和时间，但它显示了一个错误

在上下文中找不到实用程序。您要么 a) 忘记将组件树包装在 MuiPickersUtilsProvider 中；或 b) 混合命名和直接文件导入。建议：使用来自模块索引的命名导入。

请告诉我如何解决这个错误

这是 App.js

import React, { Fragment, useState } from "react";
import { DateTimePicker } from "@material-ui/pickers";

function BasicDateTimePicker() {
  const [selectedDate, handleDateChange] = useState(new Date());

  return (
    <Fragment>
      <DateTimePicker
        label="DateTimePicker"
        inputVariant="outlined"
        value={selectedDate}
        onChange={handleDateChange}
      />

      <DateTimePicker
        autoOk
        ampm={false}
        disableFuture
        value={selectedDate}
        onChange={handleDateChange}
        label="24h clock"
      />

      <DateTimePicker
        value={selectedDate}
        disablePast
        onChange={handleDateChange}
        label="With Today Button"
        showTodayButton
      />
    </Fragment>
  );
}

export default BasicDateTimePicker;

Answer 1

尝试包装它（如示例中所示：https : //material-ui.com/components/pickers/）：

import React, { Fragment, useState } from "react";
import DateFnsUtils from '@date-io/date-fns';
import { DateTimePicker, MuiPickersUtilsProvider } from "@material-ui/pickers";

function BasicDateTimePicker() {
  const [selectedDate, handleDateChange] = useState(new Date());

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <DateTimePicker
        label="DateTimePicker"
        inputVariant="outlined"
        value={selectedDate}
        onChange={handleDateChange}
      />

      <DateTimePicker
        autoOk
        ampm={false}
        disableFuture
        value={selectedDate}
        onChange={handleDateChange}
        label="24h clock"
      />

      <DateTimePicker
        value={selectedDate}
        disablePast
        onChange={handleDateChange}
        label="With Today Button"
        showTodayButton
      />
    </MuiPickersUtilsProvider>
  );
}

export default BasicDateTimePicker;

Answer 2

如果您使用的是IntelliJ IDEA 2020.2.3，那么以下内容可能会有所帮助。

就我而言，这是您可以花一两个小时来追捕的愚蠢错误之一。所以我从官方文档中复制并粘贴了示例。我复制了组件<MuiThemeProvider/>，然后使用了 IntelliJ 的自动更正功能 ie Alt+Ener。到目前为止，一切都很好，请看屏幕：

我选择了第一行，因为 IDE 似乎正确地建议了自动更正。它在文件的标题中插入以下导入：

import MuiPickersUtilsProvider from "@material-ui/pickers/MuiPickersUtilsProvider";

事实证明，这是使用 import for 的错误版本MuiThemeProvider。正确的版本是：

import {MuiPickersUtilsProvider} from "@material-ui/pickers";

小心使用自动完成功能。大多数情况下，它会按您的预期工作，但不幸的是，并非总是如此。在这种特殊情况下，最好确保来自官方示例的所有导入与您的代码中的相同。