Heim > Fragen und Antworten > Hauptteil
Ich erstelle eine Registrierungsseite, kann aber nicht verstehen, warum sie nicht funktioniert.
EDIT: Aktualisierter Code zum Entfernen von userObject. Ich kann den Code immer noch nicht abrufen, um die Daten tatsächlich in meiner JSON-Datei zu veröffentlichen.
Neuer Code:
import { useState } from "react"; const Signup = () => { const [formData, setFormData] = useState({ email: "", password: "", confirmPassword: "", }); const handleInputChange = (event) => { setFormData({ ...formData, [event.target.name]: event.target.value, }); }; console.log(formData) const handleSubmit = (event) => { event.preventDefault(); console.log(formData); fetch("http://localhost:8000/users", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(formData), }).then(() => { window.location.href = "/profile"; }); }; return ( <div> <h2>Sign up</h2> <form onSubmit={handleSubmit}> <div> <label>Email:</label> <input type="email" name="email" value={formData.email} onChange={handleInputChange} required /> </div> <div> <label>Password:</label> <input type="password" name="password" value={formData.password} onChange={handleInputChange} required /> </div> <div> <label>Confirm Password:</label> <input type="password" name="confirmPassword" value={formData.confirmPassword} onChange={handleInputChange} required /> </div> <button type="submit">Sign up</button> </form> </div> ); }; export default Signup;
Alter Code:
import { useState } from "react"; const Signup = () => { const [formData, setFormData] = useState({ email: "", password: "", confirmPassword: "", }); const handleInputChange = (event) => { setFormData({ ...formData, [event.target.name]: event.target.value, }); }; console.log(formData) const handleSubmit = (event) => { event.preventDefault(); const userObject = { email: formData.email, password: formData.password, }; fetch("http://localhost:8000/users", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(userObject), }).then(() => { window.location.href = "/profile"; }); }; console.log(userObject) return ( <div> <h2>Sign up</h2> <form onSubmit={handleSubmit}> <div> <label>Email:</label> <input type="email" name="email" value={formData.email} onChange={handleInputChange} required /> </div> <div> <label>Password:</label> <input type="password" name="password" value={formData.password} onChange={handleInputChange} required /> </div> <div> <label>Confirm Password:</label> <input type="password" name="confirmPassword" value={formData.confirmPassword} onChange={handleInputChange} required /> </div> <button type="submit">Sign up</button> </form> </div> ); }; export default Signup;
Wenn ich formData console.log, empfängt es die Daten, aber wenn ich versuche, userObject console.log, wird es als undefiniert zurückgegeben. Ich habe stundenlang gegoogelt, hier nach Lösungen für ähnliche Probleme gesucht und verschiedene Methoden ausprobiert, kann es aber scheinbar nicht in meiner JSON-Datei speichern. Hoffentlich kann ich mit frischen Augen etwas Hilfe bekommen. Danke!
P粉1708586782024-02-26 16:11:33
这是正常的。很遗憾地告诉您,您的 console.log
函数没有在正确的时间调用!
您的代码应该是:
import { useState } from "react"; const Signup = () => { const [formData, setFormData] = useState({ email: "", password: "", confirmPassword: "", }); const handleInputChange = (event) => { setFormData({ ...formData, [event.target.name]: event.target.value, }); }; console.log(formData) const handleSubmit = (event) => { event.preventDefault(); const userObject = { email: formData.email, password: formData.password, }; console.log(userObject); fetch("http://localhost:8000/users", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(userObject), }).then(() => { window.location.href = "/profile"; }); }; return (); }; export default Signup;Sign up
就像支出者所说: