प्रतिक्रिया में पोस्ट अनुरोध के साथ मुद्दा

Aug 16 2020

बटन क्लिक काम कर रहा है, क्योंकि मैं लॉग देख सकता हूं लेकिन POST अनुरोध नहीं होता है। मैंने एक सरल इनपुट बॉक्स बनाया है, और जब बटन पर क्लिक किया जाता है, तो उसे सर्वर पर एक पोस्ट अनुरोध भेजना चाहिए।

मैं यह पता नहीं लगा सकता कि POST का अनुरोध कभी क्यों नहीं होता है, इसलिए कृपया मुझे इसका पता लगाने में मदद करें।

टिप्पणी .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 callback को कब कहा जाता है this === Comment। तो xhr.onreadystatechange काम नहीं कर रहा है।

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

मुझे लगता है कि नीचे संदर्भ आपके लिए उपयोगी है। यह प्रतिक्रिया से नहीं बल्कि एरो फंक्शन से समस्या है।
यह संदर्भ उस समस्या के बारे में अधिक स्पष्ट रूप से लिख रहा है।

संदर्भ

  1. समारोह रूपांतरण के लिए जावास्क्रिप्ट पुराना सिंटैक्स