Pourquoi mon code n'ajoute-t-il pas de données à mon fichier json ?

Question

Je crée une page d'inscription mais je n'arrive pas à comprendre pourquoi elle ne fonctionne pas.

EDIT : code mis à jour pour supprimer userObject. Je n'arrive toujours pas à obtenir le code pour publier les données dans mon fichier json.

Nouveau 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;

Ancien 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;

Lorsque je console.log formData, il reçoit les données, mais lorsque j'essaie de console.log userObject, il renvoie comme non défini. J'ai cherché sur Google pendant des heures, vérifié des solutions à des problèmes similaires ici et essayé différentes méthodes, mais je n'arrive pas à l'enregistrer dans mon fichier json. J'espère qu'avec un regard neuf, je pourrai obtenir de l'aide. Merci!

Answer 1

C'est normal. Désolé de vous dire que votre fonction console.log n'est pas appelée au bon moment !

Votre code doit être :

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 (
    

      
Sign up
      

        

          Email:
          
        
        

          Password:
          
        
        

          Confirm Password:
          
        
        Sign up
      
    
  );
};

export default Signup;

Comme disent les dépensiers :