javascript - 错误 : Form submission canceled because the form is not connected

Question

免责声明可能重复:我也有类似的问题，我想我现在已经阅读了几乎所有这些答案，但没有一个为我解决了这个问题。
我有一个应用程序，前端是 React，后端是 flask 服务器。我有一个大问题。代码似乎检查了前端和后端，但是在我单击表单的提交按钮后，我在 JS 控制台中收到错误:Form submission canceled because the form is not connected.现在，我的表单上只有一个按钮，类型为 submit , 与 handleSubmit form 中的处理程序标签，所以我认为这不是导致问题的原因。
我还添加了这个配置对象来处理潜在的 CORS 错误，但至少我没有收到任何 CORS 错误。
React 表单组件代码:

import React, { useState } from "react";
import axios from "axios";
import Button from "@material-ui/core/Button";
import { TextField } from "@material-ui/core";
import DisplayUpper from "./DisplayUpper";

function Form() {
  const [inputText, setInputText] = useState("");
  const [fetchedData, setFetchedData] = useState("");
  const [isSubmitted, setSubmitted] = useState(false);

  const handleSubmit = (e) => {
    setSubmitted(true);

    console.log("button clicked");

    const config = {
      headers: { "Access-Control-Allow-Origin": "*" },
    };

    axios
      .post(
        "http://localhost:5000/process",
        {
          inputText: inputText,
        },
        config
      )
      .then((res) => {
        console.log("res", res);
        setFetchedData(res.data);
      })
      .catch((er) => {
        console.log(er);
      });
  };

  return (
    <div>
      <form onSubmit={handleSubmit} method="post">
        <label>
          Enter Text :
          <TextField
            multiline={true}
            variant="outlined"
            name="inputText"
            value={inputText}
            onChange={(e) => setInputText(e.target.value)}
          />
        </label>
        <Button variant="contained" color="primary" type="submit" name="Submit">
          SUBMIT
        </Button>
      </form>
      {isSubmitted && <DisplayUpper />}
    </div>
  );
}

export default Form;

然后，app.py 代码:

@app.route('/process', methods=['POST'])
def result():
    text = request.form.get('inputText')
    upper_text = text.upper()
    print(upper_text)
    return upper_text

我在 package.json 中设置了代理:“http://localhost:5000”。

Answer 1

浏览器正在尝试通过表单上的方法将您的表单提交到当前 URL，当按钮 type="submit" 时它里面正在被点击。
当您使用 javascript 处理表单提交时，您应该防止表单的默认行为:

const handleSubmit = (e) => {
  e.preventDefault();
  ...
}