Material-UI 中的 Autocomplete 组件不会导致任何渲染

Posted 2023-02-21

【中文标题】Material-UI 中的 Autocomplete 组件不会导致任何渲染

【英文标题】：The Autocomplete component from Material-UI causes nothing to render

【发布时间】：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，但我不明白到底是什么问题哈哈。感谢您提出依赖关系。我花了太长时间分析我的代码......

【参考方案1】：

您的代码似乎工作正常。

你能看看我在下面创建的现场演示吗？

功能组件： https://codesandbox.io/s/material-ui-rh82u?fontsize=14&hidenavigation=1&theme=dark

类组件： https://codesandbox.io/s/autocomplete-material-ui-tmtoj?fontsize=14&hidenavigation=1&theme=dark

【讨论】：

您的沙盒确实有效。但是，您使用一个函数，然后将“ReactDOM.render”与该函数一起使用。我在一个类的 render() 中使用自动完成功能。这行得通吗？或者我可以调整我的代码更像你的例子吗？谢谢。

你也可以使用类组件。我也为它制作了一个沙箱。 codesandbox.io/s/…