搜索

首页  >  问答  >  正文

为什么我的代码没有将数据添加到我的 json 文件中?

我正在制作一个注册页面,但似乎不明白为什么它不起作用。

编辑:更新了代码以删除 userObject。仍然无法获取将数据实际发布到我的 json 文件的代码。

新代码:

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;

旧代码:

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;

当我console.log formData时,它正在接收数据,但是当我尝试console.log userObject时,它返回为未定义。我已经在谷歌上搜索了几个小时,检查了这里类似问题的解决方案,并尝试了不同的方法,但似乎无法将其保存到我的 json 文件中。希望以新的眼光我能得到一些帮助。谢谢!

P粉517814372P粉517814372381 天前506

全部回复(1)我来回复

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

    就像支出者所说:

    回复
    0
  • 取消回复