React의 POST 요청 문제

Question

로그를 볼 수 있지만 POST 요청이 발생하지 않기 때문에 버튼 클릭이 작동합니다. 간단한 입력 상자를 만들었고 버튼을 클릭하면 서버에 POST 요청을 보내야합니다.

POST 요청이 발생하지 않는 이유를 알 수 없으므로 알아 내도록 도와주세요.

Comment.js :

import React from 'react';

export class Comment extends React.Component {
    constructor(props){
        super(props);
        this.handleClick = this.handleClick.bind(this);
  
    }


    handleClick() {
        //SEND POST request
        console.log('handling click');
        const xhr = new XMLHttpRequest();
        const URL = "http://localhost:8080/api/comments"
        xhr.onreadystatechange = () => {
            if(xhr.readyState === XMLHttpRequest.DONE){
              console.log('POST request sent, comment posted.')
            }
        xhr.open('POST',URL);
        xhr.setRequestHeader('Content-type', 'text/plain');
        xhr.send(document.getElementById('comment-box').value);
        }

    }


    
    render(){
        const comment_form = (
           <div className="posts">
              <input type="text" id="comment-box" name="comment" placeholder="Say something nice." />
              <button className="submit-button" type="button" onClick={this.handleClick}> Comment </button>
           </div>
        );
        return comment_form;
    }
}

Answer 1

onReadyState eventhandler의 닫기}와 같은 구문 오류가 올바른 위치가 아닙니다.

import React from "react";
import "./styles.css";

export class Comment extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    //SEND POST request
    console.log("handling click");
    const xhr = new XMLHttpRequest();
    const URL = "http://localhost:8080/api/comments";
    xhr.onreadystatechange = () => {
      if (xhr.readyState === XMLHttpRequest.DONE) {
        console.log("POST request sent, comment posted.");
      }
    };
    xhr.open("POST", URL);
    xhr.setRequestHeader("Content-type", "text/plain");
    console.log(document.getElementById("comment-box").value);
    xhr.send(document.getElementById("comment-box").value);
  }

  render() {
    const comment_form = ( <
      div className = "posts" >
      <
      input type = "text"
      id = "comment-box"
      name = "comment"
      placeholder = "Say something nice." /
      >
      <
      button className = "submit-button"
      type = "button"
      onClick = {
        this.handleClick
      } >
      {
        " "
      }
      Comment {
        " "
      } <
      /button> <
      /div>
    );
    return comment_form;
  }
}

Answer 2

대답

화살표 함수 bind this및 onreadystatechange 콜백은 this === Comment. 따라서 xhr.onreadystatechange가 작동하지 않습니다.

 xhr.onreadystatechange = function() {
            if(xhr.readyState === XMLHttpRequest.DONE){
              console.log('POST request sent, comment posted.')
            }

아래 참조가 도움이된다고 생각합니다. 반응이 아니라 화살표 기능 때문이다.
이 참조는 그 문제에 대해 더 명확하게 작성합니다.

참고

1. Javascript 이전 구문을 화살표 함수로 변환