Problem z żądaniem POST w reakcji

Aug 16 2020

Kliknięcie przycisku działa, ponieważ widzę dziennik, ale żądanie POST nie występuje. Zrobiłem proste pole wejściowe i po kliknięciu przycisku powinno wysłać żądanie POST do serwera.

Nie mogę zrozumieć, dlaczego żądanie POST nigdy nie jest realizowane, więc pomóż mi to rozgryźć.

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

Odpowiedzi

3 Asutosh Aug 16 2020 at 03:40

Wystąpił błąd składni, na przykład zamknięcie} elementu onReadyState eventhandler nie było we właściwym miejscu

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

Odpowiedź

Funkcja strzałki bind thisi wywołanie zwrotne onreadystatechange są wywoływane kiedy this === Comment. Więc xhr.onreadystatechange nie działa.

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

Myślę, że poniższe odniesienie jest dla ciebie pomocne. Nie ma problemu z reakcją, ale z funkcją strzałki.
Ta wzmianka jest wyraźniej opisana w tym problemie.

Odniesienie

  1. Konwersja starej składni JavaScript do funkcji strzałki