0
114
VistasModo estricto de React 18 que hace que el componente se renderice dos veces
Los cambios al modo estricto en la versión 18 de React hacen que mi código se reproduzca dos veces, lo que genera un error en el controlador de cancelación de axios , pero no sé cómo borrar el error de la consola del navegador después de que la aplicación se procesa dos veces.
Tenga en cuenta: estoy trabajando en una aplicación de registro/inicio de sesión e incluso después de iniciar sesión correctamente, React me lleva de vuelta a la página de inicio de sesión debido al error de axios
useEffect(() => { let isMounted = true; // used by axios to cancel request const controller = new AbortController(); const getGoals = async () => { try { const response = await goalPrivate.get("/goals", { // option to cancel request signal: controller.signal }) console.log(response?.data); // set goals state when component mounts isMounted && setGoals(response?.data); } catch (error) { console.log(error.message); // when refreshToken expires navigate("/login", { state: { from: location }, replace: true }); } } getGoals(); // cleanup function return () => { // don't set state if component unmounts isMounted = false; // cancel request if component unmounts controller.abort(); } // eslint-disable-next-line react-hooks/exhaustive-deps }, []) 
3 Respuestas
Responde la pregunta0
React StrictMode llama a todos los efectos dos veces para asegurarse de que sus controladores de limpieza/desmontaje funcionen según lo previsto. Es posible que deba cambiar sus efectos en consecuencia, incluso si tienen una lista de dependencias vacía y normalmente no se desmontarían antes de que se cierre el sitio.
Tenga en cuenta que esto solo sucede en el modo de desarrollo estricto +. En una compilación de producción, los efectos solo se llamarán una vez y cuando cambien sus dependencias.
Para obtener más contexto, consulte https://reactjs.org/docs/strict-mode.html#ensuring-reusable-state
0
React 18 ahora tiene componentes de montaje, desmontaje y remontaje de Strict.Mode, lo que hace que abortController emita un error en el primer desmontaje. Recuerde, esto solo sucede en el modo de desarrollo cuando se aplica Strict.Mode en su index.js. Podemos verificar ese comportamiento mientras estamos en modo de desarrollo.
try { // fetch API data } catch (error) { if (process.env.NODE_ENV === "development" && error) { // ignore the error console.log(error.message); } else { // when refreshToken expires, go back to login navigate("/login", { state: { from: location }, replace: true }); } }0
Si tiene StrictMode habilitado, se activará dos veces el useEffect en el modo de desarrollo para asegurarse de que esté al tanto de los posibles efectos secundarios que podrían aparecer.