Problème avec la demande POST dans React

Aug 16 2020

Le clic du bouton fonctionne, car je peux voir le journal mais la demande POST ne se produit pas. J'ai créé une boîte de saisie simple et lorsque vous cliquez sur le bouton, il doit envoyer une requête POST au serveur.

Je ne comprends pas pourquoi la demande POST n'a jamais lieu, alors aidez-moi à comprendre.

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;
    }
}

Réponses

3 Asutosh Aug 16 2020 at 03:40

Vous avez eu une erreur de syntaxe telle que la fermeture} du gestionnaire d'événements onReadyState n'était pas au bon endroit

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;
  }
}

1 StarkJeon Aug 16 2020 at 03:32

Répondre

La fonction de flèche bind thiset onreadystatechange callback est appelée quand this === Comment. Donc xhr.onreadystatechange ne fonctionne pas.

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

Je pense que la référence ci-dessous vous est utile. Ce n'est pas un problème de réaction mais de fonction de flèche.
Cette référence est plus clairement écrite sur ce problème.

Référence

  1. Conversion de l'ancienne syntaxe Javascript en fonction de flèche