He estado tratando de conectar mi frontend y backend para una aplicación web y tengo un problema en el que, cuando un usuario crea una cuenta, se crean varios objetos para ese usuario en la base de datos. Usé console.log y descubrí que mi código NextJS se repite. Encontré esta publicación ligeramente relacionada: las funciones de los componentes se ejecutan varias veces y reaccionan . Sin embargo, se trata de problemas con llamadas asíncronas que ya resolví con controles nulos/indefinidos. Este es mi código de registro de usuario actual:
const handleUser = async (user) => { var bUserExists = false await axios.get(GET_USER(user.email)) .then(response => { bUserExists = true; }) .catch(err => { bUserExists = false }) if(!bUserExists) { bUserExists = true; await axios.post(CREATE_USER(), { email: user.email, name: user.name, }).then(newUser => { console.log(newUser.data) if(newUser.data) { router.push('/form/p1') } }).catch(err => { console.log(err) }) } } const { user, error, isLoading } = useUser(); if(isLoading) return <div>Loading...</div>; if(error) return <div>{error.message}</div>; if(user) { // try to get the user from the database // if the user doesn't exist, create one handleUser(user) }Cuando creo un usuario con este código, mi backend genera esto:
(Lo siento, todavía no tengo suficiente representante para publicar imágenes ;-; ) https://i.gyazo.com/fd83cf9362b0e88977dfb277687ca071.png
Extraño, ¿verdad? Se repite tan rápido que el usuario ni siquiera se crea cuando llega la segunda llamada.
Llegué a la conclusión de que NextJS está repitiendo el código tanto en el cliente como en el servidor, pero mi conocimiento de Next/React es muy poco para que sea muy preciso. ¿Por qué mi código (que solo debe ejecutarse una vez) se ejecuta varias veces?
-> En reaccionar debido al modo estricto, habilite la representación de cada página dos veces (solo en el entorno de desarrollo). -> para que podamos eliminar la habilitación del modo estricto simplemente eliminando este contenedor de modo estricto de index.js en reaccionar.
<React.StrictMode> <div> <ComponentOne /> <ComponentTwo /> </div> </React.StrictMode>-> y next.js se basa en reaccionar, por lo que debe encontrar la forma de deshabilitar el modo estricto en next.js. Aquí hay un enlace de documento oficial [deshabilitar el modo estricto next.js] [1] [1]: https:/ /nextjs.org/docs/api-reference/next.config.js/react-strict-mode
SOLUCIÓN: En el directorio raíz de mi proyecto Next (donde se encuentra package.json), también hay un archivo llamado next.config.js . Para habilitar el modo estricto para Next, debe cambiar el objeto nextConfig para que contenga reactStrictMode: true . Aquí está mi next.config.js que funciona:
/** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, } module.exports = nextConfig