SyntaxError：位置 0 处 JSON 中的意外令牌 P - React.js 应用程序中的错误

Question

我创建了一个具有后端（MongoDB 和 Mongoose）的 React.js 应用程序。在我的应用程序中，我有一个注册表单组件，我想要的是当用户单击注册页面上的 Register 按钮时，输入字段中的所有数据都应存储在我的后端。我使用 MongoDB-atlas 作为后端。我的后端服务器在端口 5000 上运行，而前端在端口 3000

上运行

我在我的 package.json 文件中添加了这一行 "proxy": "http://localhost:5000"

当我尝试测试我的项目时，首先我启动我的前端和后端服务器。但是当我点击 Register 按钮时，我在控制台中收到 2 个错误：

1-Proxy error: Could not proxy request /favicon.ico from 127.0.0.1:3000 to http://localhost:5000

2-Uncaught (in promise) SyntaxError: Unexpected Token P in JSON at position 0

这是我目前安装的版本信息：

"react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^6.2.1",
    "react-scripts": "3.4.1"

这是我的Signup.jsx文件代码

import React, {useState} from 'react'
import {NavLink, useNavigate} from 'react-router-dom'

const Signup = () => {
  const navigate = useNavigate()
  const [user, setUser] = useState({
    name: "",
    email: "",
    phone: "",
    work: "",
    password: "",
    cpassword: ""
  })
  let name, value
  const handleInput = (event) => {
    name = event.target.name
    value = event.target.value
    setUser({...user, [name]:value})
  }
  const postData = async (event) => {
    event.preventDefault()
    const {name, email, phone, work, password, cpassword} = user
    const res = await fetch('/register', {
      method: 'POST',
      headers: {
        "Accept": "application/json",
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({name, email, phone, work, password, cpassword})
    })
    const data = await res.json()
    if(data.status === 422 || !data){
      window.alert("Failed to register")
    }else{
      window.alert("Registered successfully please signin")
      navigate('/signin')
    }
  }
  return (
    <>
      <section>
        <h1>Sign up</h1>
        <form method='POST'>
            <input value={user.name} onChange={handleInput} type="text" name="name" placeholder="Your full name"></input>
            <input value={user.email} onChange={handleInput} type="email" name="email" placeholder="Your email"></input>
            <input value={user.phone} onChange={handleInput} type="number" name="phone" placeholder="Your phone number"></input>
            <input value={user.password} onChange={handleInput} type="password" name="password" placeholder="Create a password"></input>
            <input value={user.cpassword} onChange={handleInput} type="password" name="cpassword" placeholder="Please retype your password"></input>
            <input onClick={postData} type="submit" name="signup-btn" value="Register"></input>
        </form>
        <NavLink to="/login">Already have an account - Login</NavLink>
      </section>
    </>
  )
}

export default Signup

Answer 1

在 React 中，我们通常实际上提交表单并允许默认的表单操作发生。将input/button 的onClick={postData} 移动到form 的onSubmit={postData} 并防止发生默认提交操作。

const Signup = () => {
  const navigate = useNavigate();
  const [user, setUser] = useState({
    name: "",
    email: "",
    phone: "",
    work: "",
    password: "",
    cpassword: ""
  });

  const handleInput = (event) => {
    const { name, value } = event.target;
    setUser({ ...user, [name]: value });
  };

  const postData = async (event) => {
    event.preventDefault();
    const { name, email, phone, work, password, cpassword } = user;
    try {
      const res = await fetch('/register', {
        method: 'POST',
        headers: {
          "Accept": "application/json",
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ name, email, phone, work, password, cpassword })
      })
      const data = await res.json();
      if (data.status === 422 || !data) {
        window.alert("Failed to register");
      } else {
        window.alert("Registered successfully please signin");
        navigate('/signin');
      }
    } catch(error) {
      // handle any rejected fetch Promises and other errors
    }
  };

  return (
    <section>
      <h1>Sign up</h1>
      <form onSubmit={postData}>
        <input value={user.name} onChange={handleInput} type="text" name="name" placeholder="Your full name" />
        <input value={user.email} onChange={handleInput} type="email" name="email" placeholder="Your email" />
        <input value={user.phone} onChange={handleInput} type="number" name="phone" placeholder="Your phone number" />
        <input value={user.password} onChange={handleInput} type="password" name="password" placeholder="Create a password" />
        <input value={user.cpassword} onChange={handleInput} type="password" name="cpassword" placeholder="Please retype your password" />
        <input type="submit" name="signup-btn" value="Register" />
      </form>
      <NavLink to="/login">Already have an account - Login</NavLink>
    </section>
  )
}

Answer 2

同意 Drew 的观点，让 React 合成事件来完成他们的工作。但是，错误发生在您的服务器响应中。触发 API 调用后，此行要求将有效的 JSON 解析为对象

  const data = await res.json() // Not JSON? Error then

尝试在控制台或网络选项卡中调试基于该 API 调用返回的请求是什么