Problem mit POST-Anforderung in React

Question

Der Klick auf die Schaltfläche funktioniert, da ich das Protokoll sehen kann, die POST-Anforderung jedoch nicht erfolgt. Ich habe ein einfaches Eingabefeld erstellt, und wenn auf die Schaltfläche geklickt wird, sollte eine POST-Anfrage an den Server gesendet werden.

Ich kann nicht herausfinden, warum die POST-Anfrage niemals stattfindet. Bitte helfen Sie mir, dies herauszufinden.

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

Sie hatten einen Syntaxfehler wie das Schließen von} onReadyState Eventhandler war nicht der richtige Ort

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

Antworten

Die thisPfeilfunktion bind und onreadystatechange callback wird aufgerufen, wenn this === Comment. Xhr.onreadystatechange funktioniert also nicht.

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

Ich denke, die folgende Referenz ist hilfreich für Sie. Es ist kein Problem von der Reaktion, sondern von der Pfeilfunktion.
In dieser Referenz wird klarer über dieses Problem geschrieben.

Referenz

1. Javascript alte Syntax in Pfeilfunktionskonvertierung