Question

我在类的render方法内返回了一个自动完成组件。但是，它不会导致渲染。取出组件可以使其他所有内容按预期呈现。

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>
      );
    }
  }

排除自动完成功能，其中的所有内容都可以使渲染正常工作。我正在使用Material-UI指南中的示例自动完成代码。

我在控制台中收到此错误：

*未捕获的错误：无效的挂钩调用。挂钩只能在功能组件的主体内部调用。发生这种情况可能是由于以下原因之一：

您可能使用的React和渲染器版本不匹配（例如React DOM）
您可能正在违反挂钩规则
您可能在同一应用中拥有多个React副本*

是什么原因导致此渲染问题？使用自动完成功能（或挂钩）有什么限制？

Answer 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

Material-UI的自动完成组件不会导致任何渲染

1 个答案: