Vấn đề với Yêu cầu ĐĂNG trong React

Question

Nhấp vào nút đang hoạt động, vì tôi có thể xem nhật ký nhưng yêu cầu ĐĂNG không xảy ra. Tôi đã tạo một hộp nhập liệu đơn giản và khi nút được nhấp, nó sẽ gửi yêu cầu ĐĂNG đến máy chủ.

Tôi không thể tìm ra lý do tại sao yêu cầu ĐĂNG không bao giờ diễn ra, vì vậy hãy giúp tôi tìm hiểu.

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

Bạn có một lỗi cú pháp chẳng hạn như đóng} của trình xử lý sự kiện onReadyState không đúng chỗ

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

Câu trả lời

Hàm mũi tên ràng buộc thisvà gọi lại onreadystatechange được gọi khi nào this === Comment. Vì vậy, xhr.onreadystatechange không hoạt động.

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

Tôi nghĩ rằng tài liệu tham khảo dưới đây là hữu ích cho bạn. Nó không phải là vấn đề từ phản ứng mà là từ chức năng mũi tên.
Tài liệu tham khảo này là viết rõ ràng hơn về vấn đề đó.

Tài liệu tham khảo

1. Cú pháp cũ của Javascript để chuyển đổi hàm mũi tên