python - 如何从 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;

Flask 服务器:

#!/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 post到服务器，这就是你从服务器(flask)检索数据的方式

@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