React'te POST İsteği ile ilgili sorun

Question

Günlüğü görebildiğim için düğme tıklaması çalışıyor ancak POST isteği gerçekleşmiyor. Basit bir giriş kutusu yaptım ve buton tıklandığında sunucuya bir POST isteği göndermesi gerekiyor.

POST isteğinin neden asla gerçekleşmediğini anlayamıyorum, bu yüzden lütfen çözmeme yardım edin.

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'in kapanması} gibi bir sözdizimi hatası yaşadınız, hattathandler doğru yerde değildi

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

Cevap

Ok işlevi bağlama thisve onreadystatechange geri araması ne zaman çağrılır this === Comment. Yani xhr.onreadystatechange çalışmıyor.

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

Aşağıdaki referansın size yardımcı olacağını düşünüyorum. React'ten değil, ok fonksiyonundan sorun değil.
Bu referans, bu sorun hakkında daha net bir şekilde yazılır.

Referans

1. Javascript eski sözdiziminden ok işlevine dönüştürme