J'essaie d'écrire une application de gestion de contact qui utilise un état de réaction pour stocker les informations de contact.
J'ai deux états, une donnée et l'autre userData. Les données sont censées être un objet qui stocke le contact que l'utilisateur entre dans les coordonnées de contact tandis que UserData serait une matrice de tous les objets de données.
Mais pour une raison quelconque, je reçois une seule propriété de l'objet ,
3 Réponses :
Vous oubliez de répandre -data lorsque vous le faites:
setData({
...data
[name]: value,
});
Votre code est bon, le problème est que lorsque vous utilisez Votre que dans votre formulaire de soumission, vous n'avez pas besoin du tout et vous pouvez modifier votre setingdata Vous perdez tout. Dans des composants fonctionnels, vous devez répandre le olddata puis modifier ce que vous aimez. setdata doit ressembler à cet intérieur handlechange : < / p> userData , car vous pouvez simplement utiliser les données Objet qui a toutes les informations dont vous avez besoin. poignées comme ceci:
J'ai collé le code correct ici, à l'aide de l'opérateur de diffusion, la copie des données précédentes est fournie lorsque SetData est appelé de manière à ce que les valeurs ne soient pas écrasées.
const [data, setData] = useState({
firstName: "",
lastName: "",
phoneNumber: "",
address: "",
imag: "",
});
// declear a new state varaible to store data
const [userData, setUserData] = useState([""]);
function handleChange(e) {
let name = e.target.name;
let value = e.target.value;
setData({
...data,
[name]: value,
});
}
function handleSubmit(e) {
e.preventDefault();
setUserData([...userData, data]);
}
console.log(userData);
return (
<>
<form id="form" className="needs-validation" onSubmit={handleSubmit}>
<div>
<input
className="imgFile"
type="text"
placeholder="First name"
value={data.firstName}
name="firstName"
onChange={handleChange}
/>
<input
className="imgFile"
type="text"
placeholder="Last name"
value={data.lastName}
name="lastName"
onChange={handleChange}
/>
<input
className="imgFile"
type="tel"
placeholder="Phone Number"
value={data.phoneNumber}
name="phoneNumber"
onChange={handleChange}
/>
<input
className="imgFile"
type="email"
placeholder="Email"
value={data.email}
name="email"
onChange={handleChange}
/>
<input
className="imgFile"
type="text"
placeholder="Address"
value={data.address}
name="address"
onChange={handleChange}
/>
<input
type="file"
name="img"
accept="image/*"
value={data.img}
onChange={handleChange}
/>
<button className="contactButton">Save </button>
</div>
</form>
</>
);
}
Merci à tous pour votre aide.
@wealthMiq Bienvenue, vote Répondez-vous si vous les trouvez utiles.