Problema con la richiesta POST in React

Question

Il clic del pulsante funziona, poiché posso vedere il registro ma la richiesta POST non viene eseguita. Ho creato una semplice casella di input e quando si fa clic sul pulsante, dovrebbe inviare una richiesta POST al server.

Non riesco a capire perché la richiesta POST non viene mai eseguita, quindi per favore aiutami a capirlo.

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

Hai avuto un errore di sintassi come la chiusura} del gestore di eventi onReadyState non era nel posto giusto

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

Risposta

thisQuando viene chiamata la funzione freccia bind e onreadystatechange this === Comment. Quindi xhr.onreadystatechange non funziona.

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

Penso che il riferimento di seguito sia utile per te. Non è un problema da reagire ma dalla funzione freccia.
Questo riferimento è scritto più chiaramente su quel problema.

Riferimento

1. Conversione della vecchia sintassi Javascript in funzione freccia