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

Question

I managed to get data from Flask to ReactJs Frontend, but I haven't managed to send data from ReactJs to Flask API.

I'm uploading a file and storing it in Firebase. That works fine. But I want to send the downloadURL back to Flask API after it is stored.

Here's what I tried to do in the Frontend.

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();
    };

That's what I'm doing to ensure that I send the data to API after the upload. So I'm calling postPath() after uploadFiles(file) .

And in server.py (Flask API) I'm doing the following to get the Json data.

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

NOTE in the same server.py I have another route as well with a corresponding function. I don't know if it's relevant or not but here it is.

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

I keep getting this error.

TypeError: Cannot read properties of undefined (reading '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

The problem is in the React code before it hits your Flask app: The postPath function is expecting to be passed an event, but you're calling it without any arguments: postPath() .

Cannot read properties of undefined (reading 'preventDefault')

In this case e is undefined, so you can't call preventDefault on it.

There's actually no need for e.preventDefault() inside postPath , e.preventDefault() is used in a form submission handler to prevent the default behavior (reloading the page) when a form is submitted. In your case you want to keep the first instance of e.preventDefault() but you can remove the second one.

You can actually remove the postPath function altogether, it's not really doing anything for you:

    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));
    };