[英]TypeError: react__WEBPACK_IMPORTED_MODULE_6___default.a.useState is not a function
Below I provide a simplified sketch of my ReactJS code (based on material-ui ). 下面,我提供了我的ReactJS代码的简化草图(基于material-ui )。 This code does not compile, because probably I added function handleClickOpen()
and function handleClose()
in a wrong place. 该代码无法编译,因为可能是我在错误的位置添加了function handleClickOpen()
和function handleClose()
。 How can I fix it? 我该如何解决?
In particular, the following is the error message: 特别是,以下是错误消息:
TypeError: react__WEBPACK_IMPORTED_MODULE_6___default.a.useState is not a function 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;
Hooks like useState
are only for functional components 类似于useState
挂钩仅适用于功能组件
They should be called outside of the render function 应该在render函数之外调用它们
React and react-dom need to be version 16.8 or higher 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;
根据React文档,我们不能在基于类的组件内部使用钩子,请参考以下URL https://reactjs.org/docs/hooks-faq.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.