Logré obtener datos de Flask a ReactJs Frontend, pero no logré enviar datos de ReactJs a Flask API.
Estoy cargando un archivo y almacenándolo en Firebase. Eso funciona bien. Pero quiero enviar la URL de descarga de vuelta a la API de Flask después de almacenarla.
Esto es lo que traté de hacer en el 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(); }; Eso es lo que estoy haciendo para asegurarme de enviar los datos a la API después de la carga. Así que estoy llamando a postPath() después de uploadFiles(file) .
Y en server.py (Flask API) estoy haciendo lo siguiente para obtener los datos de Json.
@app.route('/filePath', methods=['POST']) def get_path(): return (request.get_json())NOTA en el mismo server.py también tengo otra ruta con una función correspondiente. No sé si es relevante o no, pero aquí está.
@app.route("/details") def details(): data = person(r'path').get_data() return {"name": data.get('name') }Sigo recibiendo este error.
TypeError: no se pueden leer las propiedades de undefined (leyendo '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));El problema está en el código de React antes de que llegue a su aplicación Flask: la función postPath espera que se le pase un evento, pero la está llamando sin ningún argumento: postPath() .
No se pueden leer las propiedades de undefined (leyendo 'preventDefault')
En este caso, e no está definido, por lo que no puede llamar a preventDefault .
En realidad, no hay necesidad de e.preventDefault() dentro de postPath , e.preventDefault() se usa en un controlador de envío de formularios para evitar el comportamiento predeterminado (recargar la página) cuando se envía un formulario. En su caso, desea conservar la primera instancia de e.preventDefault() pero puede eliminar la segunda.
En realidad, puede eliminar la función postPath por completo, en realidad no está haciendo nada por usted:
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)); };