(React)Property '' does not exist on type 'Readonly<{}>' 에러

nammm·2022년 7월 27일
0

React

목록 보기
1/1

댓글 기능 구현 중 아래 에러 문구가 계속 발생함
**_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

profile
퍼블리셔입니다.

0개의 댓글