MERN栈前端登录页连接MongoDB后端报错求助

核心问题 #

错误TypeError: user is not iterable是因为你用数组解构语法去解析一个对象。你的user是React状态里的对象（{name: "", email: ""}），而数组解构const [name, email] = user只能用于数组这类可迭代类型，所以触发报错。

修正代码 #

把PostData函数里的错误解构代码替换成对象解构即可：

const PostData = async (e) => {
  e.preventDefault();
  // 替换数组解构为对象解构
  const { name, email } = user; 
  console.log(name);
  console.log(email);
  const res = await fetch("/register", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      name,
      email,
    }),
  });
  const data = await res.json();
  console.log(name);
  console.log(email);
  if (data.status === 422 || !data) {
    window.alert("Invalid Registeration");
  } else {
    window.alert(" Registeration Successfull");
  }
}; 

额外检查点 #

• 确认后端/register接口能正常接收POST请求，且正确解析JSON格式的请求体
• 若前后端端口不同，需在后端配置cors中间件解决跨域问题
• 可以在handleInputs函数内打印user，确认输入时状态是否正确更新

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