如何在Flask服务器中对特定的React组件进行更改？

Question

我希望我的问题很清楚。

因此，我在组件A中有一个React表单。我想使用AJAX请求将字段传递给Flask服务器，该服务器处理接收到的数据并更新组件B中的DOM。

尝试查找其他几个SO页面，但是没有一个回答这个问题。 而且我对AJAX和Flask都是超级新手，所以这也无济于事。

我当前的代码如下所示：

成分A：

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

您的reactjs http帖子没有任何问题，但是我建议您使用fetch api。 但是，当您想从服务器与客户端对话时，必须使用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