材料 UI 输入自动完成在 React.js 中不起作用答案

【问题标题】：Material UI Input Autocomplete not working in React.js材料 UI 输入自动完成在 React.js 中不起作用
【发布时间】：2020-07-27 04:40:10
【问题描述】：

当我尝试完全从文档中导入自动完成功能时： https://material-ui.com/components/autocomplete/ 我收到以下错误消息：

Failed to compile.

./node_modules/@material-ui/lab/esm/useAutocomplete/useAutocomplete.js
Attempted import error: 'unstable_useId' is not exported from '@material-ui/core/utils' (imported as 'useId').

反应代码：

/* eslint-disable no-use-before-define */
import React from 'react';
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';

export const MyTeamShiftPlanInput = () => {
  return (
    <Autocomplete
      id="combo-box-demo"
      options={top100Films}
      getOptionLabel={(option) => option.title}
      style={{ width: 300 }}
      renderInput={(params) => <TextField {...params} label="Combo box" variant="outlined" />}
    />
  );
}

// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
  { title: 'The Shawshank Redemption', year: 1994 },
  { title: 'The Godfather', year: 1972 },
  { title: 'The Godfather: Part II', year: 1974 },
  { title: 'The Dark Knight', year: 2008 },
  { title: '12 Angry Men', year: 1957 },
  { title: "Schindler's List", year: 1993 },
  { title: 'Pulp Fiction', year: 1994 },
  { title: 'The Lord of the Rings: The Return of the King', year: 2003 },
  { title: 'The Good, the Bad and the Ugly', year: 1966 },
  { title: 'Fight Club', year: 1999 }
];

当前版本的 MUI：

    "@material-ui/core": "^4.9.10",
    "@material-ui/lab": "^4.0.0-alpha.49",
    "@material-ui/pickers": "^3.2.10",

【问题讨论】：

我建议您删除 node_modules 文件夹并从头开始安装所有内容。您的代码似乎一切正常。
根据他们的 github 讨论论坛，这似乎是最新 MUI 版本的“错误对等依赖”问题。尝试改用 4.8。
谢谢，@LazarNikolic。这非常有效！我现在觉得浪费 1.5 小时来解决这个问题有点愚蠢。
@WageeshaR 我也读过，但重新安装后一切正常。

标签： reactjs input material-ui

【解决方案1】：

到目前为止，它在当前标签上存在某种错误，您可以尝试更改 @material-ui/lab 模块的版本

发件人：

"@material-ui/lab": "^4.0.0-alpha.49"

收件人：

"@material-ui/lab": "4.0.0-alpha.46"

【讨论】：

谢谢，它解决了我的问题。对于遇到相同问题的其他人，请注意“4.0.0-alpha.46”前面没有插入符号 (^) 字符

【解决方案2】：

这是对@Dhika 上述回答的补充。

我第一次尝试他的解决方案没有奏效，因为我没有注意到版本'"4.0.0-alpha.46"'前面没有插入符号。

解决问题

运行 rm -rf node_modules/ 删除 node_modules 文件夹
打开package.json 并查找"@material-ui/lab": "^4.0.0-alpha.XX"
修改当前版本为"@material-ui/lab": "4.0.0-alpha.46"
运行npm install
运行npm start

【讨论】：