Javascript 无法在react类中声明常量

我正在尝试在react类中实现datepicker，在这个过程中，我在react类中声明了const，并且我得到了解析错误。有人能帮我解释一下声明的错误吗

import React,{useState} from 'react';
import ReactDOM from 'react-dom';
import {Card, Container,Table,Form,InputGroup,Col,Button} from 'react-bootstrap';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import '../css/category.css';


class Categories extends React.Component{

  const date = useState(new Date());
  
   constructor(props){
     super(props);
   }

    componentDidMount() {
        document.title="Categories";
    }
   render(){

        return(<div>
            <Container fluid className="categorycardcont">
                <Card border="info">
                    <Card.Header className="categorycarddheader">CATEGORY SEARCH</Card.Header>
                    <Card.Title className="categorycardtitle"> Here one can find the category details involved in WebSite construction</Card.Title>
                    <Card.Body>
                      <Form>
                        <Form.Row className="align-items-center">
                          <Col sm={3} className="my-1">
                            <Form.Label>Category</Form.Label>
                            <Form.Control as="select">
                              <option>Please select Category here</option>
                              <option>Food</option>
                              <option>Travel</option>
                              <option>Restaurant</option>
                              <option>Technology</option>
                              <option>Gadgets</option>
                            </Form.Control>
                          </Col>
                          <Col sm={3} className="my-1">
                            <Form.Label>Created by</Form.Label>
                            <InputGroup>
                              <InputGroup.Prepend>
                                  <InputGroup.Text>@</InputGroup.Text>
                              </InputGroup.Prepend>
                              <Form.Control id="inlineFormInputGroupUserName" placeholder="UserName" />
                            </InputGroup>
                          </Col>
                          <Col sm={2} className="my-1">
                            <Form.Label>Created on</Form.Label>
                            <InputGroup>
                              <DatePicker selected={date}/>
                            </InputGroup>
                          </Col>
                          <Col sm={1} className="my-1">
                            <Form.Label>Active</Form.Label>
                            <Form.Check type="checkbox" id="autoSizingCheck2" className="activeCheckbox"/>
                          </Col>
                          <Col sm={1} className="searchButton">
                            <Button variant="success">Click Me!</Button>
                          </Col>
                        </Form.Row>
                      </Form>
                    </Card.Body>
                </Card>
            </Container>
            <Container fluid className="categorytablecont">
                <Table striped bordered hover variant="dark">
                    <thead>
                    <tr>
                        <th>Category</th>
                        <th>Description</th>
                        <th>Created By</th>
                        <th>Created On</th>
                        <th>Updated By</th>
                        <th>Updated On</th>
                    </tr>
                    </thead>
                </Table>
            </Container>
        </div>
);
    }
}

export default Categories;

import React，{useState}来自“React”；
从“react dom”导入react dom；
从“react bootstrap”导入{Card、Container、Table、Form、InputGroup、Col、Button}；
从“反应日期选择器”导入日期选择器；
导入“react datepicker/dist/react datepicker.css”；
导入“../css/category.css”；
类类别扩展了React.Component{
const date=useState（new date（））；
建造师（道具）{
超级（道具）；
}
componentDidMount（）{
document.title=“类别”；
}
render（）{
返回(
类别搜索
在这里可以找到网站建设中涉及的类别详细信息
类别
请在此选择类别
食物
旅行
餐厅
技术
小工具
创建人
@
创建于
活跃的
点击我！
类别
描述
创建人
创建于
更新人
更新于
);
}
}
导出默认类别；

我得到下面的错误

未能编译 ./src/components/Categories.js 第11:9行：分析错误：意外标记

9 |类类别扩展反应组件{ 十,|

11 | const date=useState（新日期（））； | ^ 12 |
13 |建造师（道具）{ 14 |超级（道具）； 此错误发生在生成时，无法排除

---

不能在类组件中使用钩子。请创建一个具有默认日期的状态，如下所示

 constructor(props) {
    super(props);
    this.state = {
      date: new Date()
    };
  }

并在模板中访问它

 <InputGroup>
   <DatePicker selected={this.state.date} />
  </InputGroup>

---

工作代码-

您不能在类组件内使用useState。它们用于功能组件。您应该将代码更改为：

constructor(props){
   super(props);
   this.state = {
       myDate: new Date()
   };
}

---

您可以找到关于钩子的更多信息。

似乎您对钩子的使用感到困惑，钩子只能在功能组件中使用，因此功能组件的代码如下所示

功能类别（道具）{
const date=useState（new date（））；
useffect（（）=>{
//相当于迪德蒙特
document.title=“类别”；
}, [])
返回(
////返回正在渲染的内容
)
}

你不能在类定义中声明变量。你可以创建一些方法，在这些方法中你可以使用变量，比如

const

let

…我认为你应该先学习遵循一个教程，然后再自己尝试。谢谢它奏效了。你能帮我设置日期选择器的onChange函数吗？