TypeError：react__WEBPACK_IMPORTED_MODULE_6 ___ default.a.useState不是一个函数

Question

下面，我提供了我的ReactJS代码的简化草图（基于material-ui ）。 该代码无法编译，因为可能是我在错误的位置添加了function handleClickOpen()和function handleClose() 。 我该如何解决？

特别是，以下是错误消息：

TypeError：react__WEBPACK_IMPORTED_MODULE_6 ___ default.a.useState不是一个函数

import React, { Component, Fragment } from 'react';
import Slide from '@material-ui/core/Slide';


const Transition = React.forwardRef(function Transition(props, ref) {
  return <Slide direction="up" ref={ref} {...props} />;
});


class BottomControls extends Component {
    render() {

        const [open, setOpen] = React.useState(false);

        function handleClickOpen() {
          setOpen(true);
        }

        function handleClose() {
          setOpen(false);
        }

        return (
          <Fragment>
             # ...
          </Fragment>
        );
    }
}

export default BottomControls;

Answer 1

1. 类似于useState挂钩仅适用于功能组件

2. 应该在render函数之外调用它们

3. React和React-dom必须为16.8或更高版本

import React, { useState, Fragment } from 'react';
import Slide from '@material-ui/core/Slide';


const Transition = React.forwardRef(function Transition(props, ref) {
  return <Slide direction="up" ref={ref} {...props} />;
});


function BottomControls(props) {
  const [open, setOpen] = React.useState(false);
  function handleClickOpen() { setOpen(true); }
  function handleClose() { setOpen(false); }
  return (
    <Fragment>
      // whatever
    </Fragment>
  )
}

export default BottomControls;

Answer 2

根据React文档，我们不能在基于类的组件内部使用钩子，请参考以下URL https://reactjs.org/docs/hooks-faq.html