suchen

Heim  >  Fragen und Antworten  >  Hauptteil

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

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粉517814372P粉517814372261 Tage vor408

Antworte allen(1)Ich werde antworten

  • P粉170858678

    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 (
        

    Sign up

    ); }; export default Signup;

    就像支出者所说:

    Antwort
    0
  • StornierenAntwort