Как внести изменения в конкретный компонент React с сервера Flask?

Question

Надеюсь, мой вопрос достаточно ясен.

Итак, у меня есть форма React в компоненте A. Я хочу передать поля с помощью AJAX-запроса на сервер Flask, который обрабатывает полученные данные и обновляет DOM в компоненте B.

Попытался найти несколько других SO страниц, но ни одна из них не ответила на вопрос. И я очень новичок в AJAX и Flask, так что это тоже не поможет.

Мой текущий код выглядит так:

Компонент А:

import React from "react";

class InputForm extends React.Component {
  claimRef = React.createRef();
  handleSubmit = event => {
    event.preventDefault();
    const claim = this.claimRef.current.value;
    this.props.addClaim(claim);
    $.ajax({
      type: "POST",
      url: "/test/",
      data: claim
    })
      .done(function(data) {
        // self.clearForm();
      })
      .fail(function(jqXhr) {
        console.log("failed to register");
      });
  };
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Claim:
          <textarea name="claim" ref={this.claimRef} placeholder="Claim" />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

export default InputForm;

Настольный сервер:

#!/usr/bin/env python

import os
from flask import Flask, render_template, request
app = Flask(__name__)


@app.route("/")
def index():
    return render_template('index.html')


@app.route('/test/', methods=['GET', 'POST'])
def test():
    clicked = None
    if request.method == "POST":
        clicked = request
    return render_template('test.html', clicked=clicked)


if __name__ == "__main__":
    app.run(host='0.0.0.0', port=os.environ.get('PORT', 3000), debug=True)

Я временно добавил test.html файл, который должен просто печатать данные, но даже localhost: 3000 / test просто выводит «None».

Я не получаю абсолютно никаких ошибок в любой части приложения, а также я получаю status 200 на вкладке сети веб-страницы, что означает, что данные принимаются.

Как получить доступ к переданным данным и впоследствии распечатать их в компоненте B?

Answer 1

Нет ничего плохого в вашем HTTP-сообщении о реактиве, однако я бы порекомендовал вам использовать api fetch. Однако, когда вы хотите общаться с клиентом со своего сервера, вы должны использовать json.

Вот как вы можете сделать http-запрос к серверу:

const data = this.claimRef.current.value;
fetch('/test/', {
        method: "POST", 
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify(data), // body data type must match "Content-Type" header
    })
    .then(response => response.json())
    .then(data => console.log(data));

После того, как вы создадите сообщение http на сервер, вы получите данные с сервера (фляжка)

@app.route('/test/', methods=['GET', 'POST'])
def test():
    clicked = None
    if request.method == "POST":
     data = request.json
     print(data) #json data from client (reactjs)
    return jsonify(data='test')
# jsonify returns http response as json

Попробуйте и посмотрите, что вы получите! Надеюсь, это поможет и удачи! Знать о CORS

Получить API

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch