【发布时间】：2020-03-14 09:23:58
【问题描述】：
我在类的渲染方法中返回了一个自动完成组件。但是，它不会导致任何渲染；取出组件允许其他所有内容按预期呈现。
export default class Home extends Component {
render() {
return (
...
<Row>
<Autocomplete
id="combo-box-demo"
options={[{title: 'Inception'}, {title: 'Dark Knight'}]}
getOptionLabel={option => option.title}
style={{ width: 300 }}
renderInput={params => (
<TextField {...params} label="Combo box" variant="outlined" fullWidth />
)}
/>
</Row>
);
}
}
去掉 Autocomplete 和里面的所有东西可以让渲染正常工作。我正在使用 Material-UI 指南中的示例自动完成代码。
我在控制台中收到此错误：
*未捕获的错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一：
- 您的 React 和渲染器版本可能不匹配（例如 React DOM）
- 您可能违反了 Hooks 规则
- 您可能在同一个应用中拥有多个 React 副本*
什么可能导致此渲染问题？使用自动完成（或钩子）有什么限制？
【问题讨论】：
-
页面上是否有任何控制台错误？确保您安装了所有依赖项，自动完成不是核心的一部分
-
@Dellirium 我最初应该检查一下：是的，有控制台错误。我编辑了我的帖子以包含错误。
-
该代码似乎对我有用，您是否设法修复它？
-
我最近确实修复了它；这是 npm/dependencies 的问题。它涉及运行 npm audit fix，但我不明白到底是什么问题哈哈。感谢您提出依赖关系。我花了太长时间分析我的代码......
标签： javascript reactjs material-ui