无法在react类中声明常量
无法在react类中声明常量
提问于 2020-11-19 12:20:20
我试图在react类中实现数据报警器，在这个过程中，我已经在一个过程中声明了const，我正在处理的react类，我正在得到解析error.Could，请帮助这里，声明有什么问题吗？
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;我得到了下面的错误。
编译失败./src/components/Cluories.js第11:9行:解析错误:意外令牌
9类类别扩展React.Component{ 10 x
11 _ 13 \>构造函数(道具){ 14 \超级(道具)；此错误发生在构建过程中，不能排除。
回答 3
Stack Overflow用户
回答已采纳
发布于 2020-11-19 12:27:52
不能在类组件中使用钩子。创建一个默认日期的状态，如下所示
constructor(props) {
super(props);
this.state = {
date: new Date()
};
}在模板中访问它，
<InputGroup>
<DatePicker selected={this.state.date} />
</InputGroup>工作代码- https://codesandbox.io/s/elated-waterfall-s8n7c?file=/src/App.js
Stack Overflow用户
发布于 2020-11-19 12:30:02
不能在类组件中使用useState。它们被用于功能组件中。您应该将代码更改为：
constructor(props){
super(props);
this.state = {
myDate: new Date()
};
}这里你可以找到更多关于钩子的信息。
Stack Overflow用户
发布于 2020-11-19 12:42:38
似乎您对钩子的使用感到困惑，钩子只能在功能组件中使用，因此函数组件的代码将如下所示
function Categories(props) {
const date = useState(new Date());
useEffect(() => {
// is equivalent to didmount
document.title = "Categories";
}, [])
return (
//// return what you are rendering
)
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64911549
复制相关文章
相似问题
腾讯云开发者
