使用 axios 将 Json 数据从 ReactJs 前端发布到 Flask 后端

Question

我设法从 Flask 获取数据到 ReactJs 前端，但我还没有设法将数据从 ReactJs 发送到 Flask API。

我正在上传一个文件并将其存储在 Firebase 中。 这很好用。 但我想在下载 URL 存储后将其发送回 Flask API。

这是我在前端尝试做的事情。

const FileUpload = ({}) => {
    var downloadLink;
    const [progress, setProgress] = useState(0);
    const formHandler = (e) => {
      e.preventDefault();
      const file = e.target.files[0];
      uploadFiles(file);
      const postPath = (e) => {
        e.preventDefault();
        axios.post('http://localhost:3000/filePath', {
            'path': downloadLink
        }).then(response => console.log(response));
    }
    postPath();
    };

这就是我正在做的事情，以确保在上传后将数据发送到 API。 所以我在uploadFiles(file)之后调用postPath() ) 。

在 server.py （Flask API）中，我正在执行以下操作来获取 Json 数据。

@app.route('/filePath', methods=['POST'])
def get_path():
    return (request.get_json())

注意在同一个 server.py 中，我还有另一条路线以及相应的功能。 我不知道它是否相关，但在这里。

@app.route("/details")
def details():
    data = person(r'path').get_data()
    return {"name": data.get('name')
    }

我不断收到此错误。

TypeError：无法读取未定义的属性（读取“preventDefault”）

  16 |      uploadFiles(file);
  17 | 
  18 |      const postPath = (e) => {
> 19 |        e.preventDefault();
     | ^  20 |        axios.post('http://localhost:3000/filePath', {
  21 |            'path': downloadLink
  22 |        }).then(response => console.log(response));

Answer 1

问题出在 React 代码中，在它到达您的 Flask 应用程序之前： postPath函数期望传递一个事件，但您在没有任何参数的情况下调用它： postPath() 。

无法读取未定义的属性（读取“preventDefault”）

在这种情况下， e是未定义的，因此您不能在其上调用preventDefault 。

在postPath中实际上不需要e.preventDefault() ，在表单提交处理程序中使用e.preventDefault()来防止提交表单时的默认行为（重新加载页面）。 在您的情况下，您希望保留e.preventDefault()的第一个实例，但您可以删除第二个实例。

您实际上可以完全删除postPath函数，它并没有真正为您做任何事情：

    const formHandler = (e) => {
      e.preventDefault();
      const file = e.target.files[0];
      uploadFiles(file);
      axios.post('http://localhost:3000/filePath', {
        'path': downloadLink
      }).then(response => console.log(response));
    };