댓글 기능 구현 중 아래 에러 문구가 계속 발생함
**_Property 'comments' does not exist on type 'Readonly<{}>'
Property 'value' does not exist on type 'Readonly<{}>'**_
class CommentInput extends Component {
//class형 컴포넌트 생성 (state사용)
constructor(props: any) {
super(props);
// 초기 this.state를 지정
this.state = {
// 댓글 정보 저장
comments: [
{
uuid: 1,
writer: "yy",
date: "2022-07-26",
content: "리액트 댓글~~",
},
],
value: "",
};
}
//
commentChange = (event: any) => {
console.log(event.target.value);
this.setState({ value: event.target.value });
};
// 댓글 게시 버튼 함수
commentSubmit = (value: any) => {
let newComment = {
uuid: this.state.comments.length + 1,
writer: "냐",
date: new Date().toLocaleString(),
content: value,
};
this.setState({ comments:
this.state.comments.concat(newComment) });
this.setState({ value: "" });
};
render() {
return (
<div className="p-2 bg-slate-200 dark:bg-gray-700">
<form className="flex justify-between">
<input
className="w-20 h-10 mr-1 border-none rounded-md"
type="text"
placeholder="작성자"
disabled
/>
<input
id="newComment"
className="flex-1 h-10 mr-1 border-none rounded-md"
type="text"
placeholder="댓글"
value={this.state.value}
onChange={this.commentChange}
/>
<button
className="px-4 rounded-md bg-slate-100 "
type="submit"
onClick={() => {
this.commentSubmit(this.state.value);
}}
>
게시
</button>
</form>
<div className="mt-2 dark:text-white">
<ul>
{this.state.comments.map((comment: any) => {
return (
<CommentList
key={comment.uuid}
writer={comment.writer}
date={comment.date}
content={comment.content}
/>
);
})}
</ul>
</div>
</div>
);
}
}
원인: 해당 요소의 상태 개체를 입력하지 않았기 때문에 발생
해결: React.Component 클래스의 제네릭을 입력 Component<PropsObject, StateObject>.
class CommentInput extends Component<{}, {value: string}> {
//class형 컴포넌트 생성 (state사용)
constructor(props: any) {
super(props);
// 초기 this.state를 지정
this.state = {
// 댓글 정보 저장
comments: [
{
uuid: 1,
writer: "yy",
date: "2022-07-26",
content: "리액트 댓글~~",
},
],
value: "",
};
}
......//생략
}
props, state의 객체를 입력하는 방법을 모르거나 유형 검사를 비활성화 하려면 'any'유형을 사용하면 해결됨
class CommentInput extends Component<any, any> {
//class형 컴포넌트 생성 (state사용)
constructor(props: any) {
super(props);
// 초기 this.state를 지정
this.state = {
// 댓글 정보 저장
comments: [
{
uuid: 1,
writer: "yy",
date: "2022-07-26",
content: "리액트 댓글~~",
},
],
value: "",
};
}
......//생략
}
참고 자료 : https://bobbyhadz.com/blog/react-property-does-not-exist-on-type-readonly