React注册页面无法向JSON文件写入数据问题求助

我正在开发React注册页面，遇到两个问题：

• 旧代码里在handleSubmit外部调用console.log(userObject)时，提示该变量未定义
• 改用新代码移除userObject后，表单数据能通过console.log正常获取，但POST请求始终无法把数据保存到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;

问题分析与解决 #

1. 旧代码userObject未定义问题

userObject是handleSubmit函数内部的局部变量，函数外部无法访问，所以外部的console.log(userObject)会报错。要打印这个变量，把console.log移到handleSubmit内部即可。

2. POST请求无法写入JSON文件问题

前端JS不能直接读写本地JSON文件，浏览器有安全限制。你用的http://localhost:8000/users如果是静态文件服务器（比如json-server）或自定义后端，按以下方向排查：

• 检查后端/服务配置：
  • 如果用json-server，必须用json-server --watch db.json启动，且db.json要有users数组结构：

    {
      "users": []
    }
    

  • 自定义后端要确保正确解析JSON请求体，完成文件写入逻辑。
• 添加错误捕获：当前代码没处理请求失败，补充后能看到具体报错：

  fetch("http://localhost:8000/users", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(formData),
  })
  .then(res => {
    if (!res.ok) throw new Error(`请求失败，状态码：${res.status}`);
    return res.json();
  })
  .then(() => {
    window.location.href = "/profile"; 
  })
  .catch(err => console.error("错误信息:", err));
  

• 过滤冗余字段：新代码把confirmPassword也传给了后端，如果后端不需要这个字段，可过滤后再提交：

  const { confirmPassword, ...userData } = formData;
  // 用userData作为请求体
  body: JSON.stringify(userData),
  

内容的提问来源于stack exchange，提问作者jonooo