ReactでのPOSTリクエストの問題

Aug 16 2020

ログを確認できますが、POSTリクエストが発生しないため、ボタンのクリックは機能しています。簡単な入力ボックスを作成しました。ボタンをクリックすると、サーバーにPOSTリクエストが送信されます。

POSTリクエストが発生しない理由がわからないので、理解するのを手伝ってください。

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

回答

3 Asutosh Aug 16 2020 at 03:40

onReadyStateイベントハンドラーの}を閉じるなどの構文ミスがありました。

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

回答

矢印関数のバインドthisとonreadystatechangeコールバックは、のときに呼び出されthis === Commentます。したがって、xhr.onreadystatechangeが機能しません。

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

以下の参考文献がお役に立てばと思います。反応からではなく、矢印機能から問題があります。
このリファレンスは、その問題についてより明確に記述されています。

参照

  1. Javascriptの古い構文から矢印関数への変換