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

【问题标题】：How to solve this error Can not find utils in context如何解决此错误 Can not find utils in context
【发布时间】：2020-05-14 05:17:14
【问题描述】：

我正在使用 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;

【问题讨论】：

标签： reactjs material-ui

【解决方案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;

【讨论】：

我什至对尝试这个持怀疑态度.. 但在所有失败之后.. 我想试一试，令我惊讶的是，它就像一个魅力。谢谢@Kaca992
我相信提到这一点的文档现在在这里：material-ui-pickers.dev/getting-started/usage
对于新的 Material-UI 5 版本，您应该使用 LocalizationProvider 而不是 MuiPickersUtilsProvider，如 migration documentation 中所述

【解决方案2】：

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

就我而言，这是你可以花一两个小时来追查的愚蠢错误之一。所以我复制并粘贴了official docs 中的示例。我复制了组件<MuiThemeProvider/>，然后使用了 IntelliJ 的自动更正功能，即Alt+Ener。到目前为止，一切顺利，请看屏幕：

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

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

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

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

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

【讨论】：

【解决方案3】：

我在 Lerna monorepo 场景中遇到了同样的错误。正如上述答案所建议的那样，我确保使用正确的导入，但错误仍然存在。

发生错误的原因是：

我使用的是 yarn 工作区
import { MuiPickersUtilsProvider } from "@material-ui/pickers"; 在一个包中
import { DateTimePicker} from "@material-ui/pickers"; 在第 3 方库中
吊装恰巧将库包放入root/node_modules，将“@material-ui/pickers”放入root/packages/app/node_modules

=> 我通过MuiPickersUtilsProvider 设置的上下文与库查找的上下文并不完全相同，因此出现错误。

幸运的是，修复很简单，只需在root/package.json 中将“@material-ui/pickers”和红方包标记为“nohoist”：

  "workspaces": {
    "packages": [
      "packages/*"
    ],
    "nohoist": [      
      "**/@material-ui/pickers**",
      "**/the-3rd-part-library**"
    ]
  },

希望这可以节省我尝试修复此问题所花费的 10 个小时 ?

【讨论】：

【解决方案4】：

我还使用了 yarn 工作区，其中我在工作区中的一个包用作我的组件库，用于我的 react 应用程序包中。我只需要确保这两个软件包具有相同的日期 util 版本。就我而言，我使用的是@date-io/moment。一旦我在两个包中指定了“@date-io/moment”：“^1.3.13”，这个错误就解决了。

【讨论】：

【解决方案5】：

从 1900 年开始，openTo 为“年”。

版本：@material-ui/pickers": "^3.3.10"

<DatePicker
        disableFuture
        openTo="year"
        format="dd/MM/yyyy"
        label="Date of birth"
        views={["year", "month", "date"]}
        value={selectedDate}
        onChange={handleDateChange}
      />

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案6】：

我试图解决这个问题很长时间。我忘了用<LocalizationProvider dateAdapter={AdapterDateFns}>. 包装DatePicker 组件

import AdapterDateFns from '@mui/lab/AdapterDateFns';
import LocalizationProvider from '@mui/lab/LocalizationProvider';
import DatePicker from '@mui/lab/DatePicker';

<LocalizationProvider dateAdapter={AdapterDateFns}>
          <DatePicker
            disableFuture
            label="Responsive"
            openTo="year"
            views={['year', 'month', 'day']}
            value={dateValue}
            onChange={(newValue) => {
              setDateValue(newValue);
            }}
            renderInput={(params) => <TextField {...params} />}
          />
 </LocalizationProvider>

上述解决方案对我有用

【讨论】：