Warum fügt mein Code meiner JSON-Datei keine Daten hinzu?

Question

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!

Answer 1

这是正常的。很遗憾地告诉您，您的 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 (
    

      
Sign up
      

        

          Email:
          
        
        

          Password:
          
        
        

          Confirm Password:
          
        
        Sign up
      
    
  );
};

export default Signup;

就像支出者所说：