Mengapa kod saya tidak menambah data pada fail json saya?
Saya sedang membuat halaman pendaftaran tetapi tidak dapat memahami mengapa ia tidak berfungsi.
EDIT: Kod dikemas kini untuk mengalih keluar userObject. Masih tidak boleh mendapatkan kod untuk menyiarkan data ke fail json saya.
Kod baharu:
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;
Kod lama:
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;
Apabila saya console.log formData, ia menerima data, tetapi apabila saya cuba console.log userObject, ia kembali sebagai tidak ditentukan. Saya telah googling selama berjam-jam, menyemak penyelesaian kepada masalah yang sama di sini, dan mencuba kaedah yang berbeza, tetapi nampaknya tidak dapat menyimpannya ke fail json saya. Semoga dengan mata yang segar saya dapat bantuan. Terima kasih!
