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

Question

I have an Autocomplete component returned inside the render method of a class. However, it causes nothing to render; taking the component out allows everything else to render as expected.

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

Taking out Autocomplete and everything inside allows the render to work normally. I am using the example Autocomplete code from Material-UI's guide.

I receive this error in the console:

*Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app*

What could be causing this render issue? What are the constraints on using Autocomplete(or hooks)?

Answer 1

Your code seems to work correctly.

Could you check the live demo that I have created down below?

Functional component: https://codesandbox.io/s/material-ui-rh82u?fontsize=14&hidenavigation=1&theme=dark

Class component: https://codesandbox.io/s/autocomplete-material-ui-tmtoj?fontsize=14&hidenavigation=1&theme=dark