Я пытаюсь работать с моим компонентом Register в моем проекте веб-приложения. До сих пор мне удавалось отобразить эту страницу, но сейчас самая большая проблема, с которой я сталкиваюсь, - это попытка отправить форму для отправки данных в мой Flask бэкэнд. Я не уверен, почему это не работает, и я полностью озадачен. Я новичок в React, поэтому выясняю, все это ново для меня.
Одна вещь, которую я заметил, это то, что у меня Flask работает на порту 5000, но когда я запускаю React, он работает на порту 3000. Может ли это быть проблемой? Если так, как бы я это исправить?
***React***
import React, {Component, useState} from "react";
function Register () {
const [inputF_name, setInputF_name] = useState("");
const [inputL_name, setInputL_name] = useState("");
const [inputUsername, setInputUsername] = useState("");
const [inputEmail, setInputEmail] = useState("");
const [inputPassword, setInputPassword] = useState("");
const [url, setUrl] = useState("http://localhost:5000/register")
const [response, setResponse] = useState("")
const registerAccount = async () => {
const output = document.getElementById("flaskResponse");
const configs = {
method : "POST",
mode : "cors",
headers : {"Content-Type" : "application/json"},
body : JSON.stringify({
f_name : inputF_name,
l_name : inputL_name,
username : inputUsername,
email : inputEmail,
password : inputPassword
})
}
try {
JSON.parse(configs);
const response = await fetch(url, configs);
const flaskResponse = await response.json();
setResponse(flaskResponse["response"]);
} catch (error) {
console.log(error);
}
output.innerHTML += "<p>" + response + "</p>";
}
return (
<div className="Register">
<h2>Register Account</h2>
<div id="flaskResponse"/>
<center><form className = "registerForm">
<input
type = "text"
id="f_name"
onChange={e => setInputF_name(e.target.value)}
placeholder="First Name">
</input>
<br></br>
<input
type = "text"
id="l_name"
onChange={e => setInputL_name(e.target.value)}
placeholder="Last Name">
</input>
<br></br>
<input
type = "text"
id="username"
onChange={e => setInputUsername(e.target.value)}
placeholder="Username">
</input>
<br></br>
<input
type = "password"
id="password"
onChange={e => setInputPassword(e.target.value)}
placeholder="Password">
</input>
<br></br>
<input
type = "text"
id="email"
onChange={e => setInputEmail(e.target.value)}
placeholder="Email">
</input>
</form></center>
<br></br>
<center>
<button onClick={() => registerAccount()} id="registerButton">Register</button>
</center>
</div>
)
}
export default Register;
***FLASK***
from flask import Flask, render_template, request, redirect, session, jsonify, flash, url_for
from backend_app.user import User
from flask_cors import CORS
dbpath = "./data/transit.db"
app = Flask(name)
CORS(app)
@app.route('/register', methods = ["POST"])
def register():
error_message = "There was an error creating your account! Please try again."
data = request.get_json()
f_name = data['f_name']
l_name = data['l_name']
username = data['username']
password = data['password']
email = data['email']
encrypted_password = encrypt_password(password)
new_user = User(pk = None, username = username, encrypted_password = encrypted_password, f_name = f_name, l_name = l_name, balance = balance)
try:
new_user.save()
print("Thanks for joining Transit Buddy!", new_user.username)
except:
time.sleep(5)
return jsonify({"error": error_message})
finally:
#should return user to loggedin screen
return redirect("/homepage")
if name == "main":
app.run(debug=True, port = 5000)