Creé una aplicación React.js que tiene backend (MongoDB y Mongoose). En mi aplicación, tengo un componente de formulario de registro y lo que quiero es que cuando un usuario haga clic en el botón Registrarse en la página de registro, todos los datos en los campos de entrada se almacenen en mi backend. Estoy usando MongoDB-atlas como backend. Mi servidor backend se ejecuta en el puerto 5000 y Frontend se ejecuta en el puerto 3000
He agregado esta línea "proxy": "http://localhost:5000" en mi archivo package.json
Cuando trato de probar mi proyecto, primero inicio mis servidores Frontend y Backend. Pero cuando hago clic en el botón Registrar , aparece 2 errores en la consola:
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
Aquí está la información de la versión que tengo instalada actualmente:
"react": "^16.13.1", "react-dom": "^16.13.1", "react-router-dom": "^6.2.1", "react-scripts": "3.4.1" Y aquí está mi código de archivo 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 SignupEn React, generalmente no enviamos formularios y permitimos que ocurran las acciones de formulario predeterminadas. Mueva el button de input / onClick={postData} al form onSubmit={postData} y evite que ocurra la acción de envío predeterminada.
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> ) }De acuerdo con la opinión de Drew, deja que los eventos sintéticos de React hagan su trabajo. Sin embargo, el error está ocurriendo en la respuesta de su servidor. Una vez que active la llamada a la API, esta línea espera que se analice un JSON válido como un objeto
const data = await res.json() // Not JSON? Error thenIntente depurar en la consola o en la pestaña de red cuál es la solicitud que devuelve en función de esa llamada API