Reactjs 如何解决这个在上下文中找不到UTIL的错误

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

在上下文中找不到UTIL。您要么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;

import React，{Fragment，useState}来自“React”；
从“@material ui/pickers”导入{DateTimePicker}”；
函数BasicDateTimePicker（）{
const[selectedDate，handleDateChange]=useState（新日期（））；
返回(
);
}
导出默认BasicDateTimePicker；

尝试包装它（如示例所示：）：

import React，{Fragment，useState}来自“React”；
从“@date io/date fns”导入DateFnsUtils；
从“@material ui/pickers”导入{DateTimePicker，MuiPickersUtilsProvider}；
函数BasicDateTimePicker（）{
const[selectedDate，handleDateChange]=useState（新日期（））；
返回(
);
}
导出默认BasicDateTimePicker；

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

就我而言，这是一个愚蠢的错误，你可以花一两个小时去追查。所以我复制并粘贴了。我复制了组件

，然后使用IntelliJ的自动更正功能，即

Alt+Ener

。到目前为止，一切顺利，请参见屏幕：

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

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

事实证明，这是使用import for

MuiThemeProvider

的错误版本。正确的版本是：

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

---

使用自动完成功能时要小心。大多数时候，它都能像你期望的那样工作，但不幸的是，并非总是如此。在这种情况下，最好确保从官方示例中导入的所有内容与代码中的内容相同。

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

发生错误的原因是：

• 我使用的是纱线工作区

• 从“@material ui/pickers”导入{MuiPickersUtilsProvider}”在一个包中

• 从“@material ui/pickers”导入{DateTimePicker}”位于第三方库中

• 将库包放入

  root/node_模块中

  ，将“@material ui/pickers”放入

  root/packages/app/node_模块中

=>我通过

MuiPickersUtilsProvider

设置的上下文与库查找的上下文并不完全相同，因此出现了错误

幸运的是，修复很简单，只需在

root/package.json

中将“@material ui/pickers”和红色方包标记为“nojust”：

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

---

希望这能帮某人节省我花了10个小时来修复这个问题我还使用了Thread工作区，其中工作区中的一个包充当我的组件库，用于我的react应用程序包中。我只需要确保这两个包的dateutil版本相同。在我的例子中，我使用@date io/moment。一旦我在两个包中都指定了“@date io/moment”：“^1.3.13”，这个错误就被解决了。

我甚至对尝试这个都非常怀疑。。但毕竟失败了。。我想试一试，但令我惊讶的是，它的效果就像一个符咒。谢谢@KACA992我相信提到这一点的文件现在就在这里：

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