He visto problemas similares en este sitio, pero no entendí correctamente por qué ocurre.
A lo que me enfrento es que estoy tratando de hacer una lista de cosas por hacer con React. Es la primera vez que uso y construyo un proyecto con reaccionar, así que todavía estoy aprendiendo.
Entonces, lo que quiero hacer es cuando un usuario hace clic en un botón, se abre un modal, luego recopila el título y los detalles de esa tarea, el usuario hace clic en guardar y el modal se cierra, luego se muestra una tarjeta que muestra esa tarea. .
Código:
let firstRender = useRef(true); useEffect(()=> { if(firstRender.current) { firstRender.current = false; } else{ if(!modalState) { if(!modalCancel) { let Title = todoTitle; let Detail = todoDetail; setTodo([...todo, { title: Title.toUpperCase(), detail: Detail }]) } } } }, [modalState, modalCancel]) modalState es solo un estado que indica si el modal está abierto o cerrado y modalCancel es un estado que indica si el modal está guardado o cancelado. También tengo otros estados que son responsables de obtener los detalles y el título del todo del modal, y un estado que realiza un seguimiento de todos los todos.
Esto funciona bien, pero muestra la siguiente advertencia en la terminal:
React Hook useEffect has missing dependencies: 'todo', 'todoDetail', and 'todoTitle'. Either include them or remove the dependency array. You can also do a functional update 'setTodo(t => ...)' if you only need 'todo' in the 'setTodo' call react-hooks/exhaustive-depsSi agrego todos los estados, mi aplicación no funciona y no quiero eliminar las dos dependencias porque quiero volver a procesar cada vez (excepto el primero cuando se carga la página) cuando se cierra el modal. Alguien me puede ayudar con eso? Puedo mostrar cómo se escriben todos los estados si es necesario.
su useEffect se volverá a ejecutar cuando cambien sus dependencias. si no pone todo como una dependencia, cuando todo cambie, no tomará un nuevo valor de todo y aún usará el valor anterior (cuando se vuelva a ejecutar en su caso cuando cambie modalState o modalClose).
ejemplo: cuando modalState , su tarea pendiente es [{title: 'one', detail: 'number one'}] , luego ejecuta alguna otra función que cambia el valor del estado de tarea pendiente (por ejemplo, obtener datos del servidor) y la nueva tarea pendiente es ahora:
[ {title: 'one', detail: 'number one'}, {title: 'two', detail: 'number two'} ] ¡pero su modalState no cambia! ¡lo que significa que el valor del estado todo en su función useEffect no cambia! ( [{title: 'one', detail: 'number one'}] )
luego llamas a setTodo dentro de useEffect con {title: "three", detail: "number three"} resultará:
[ {title: 'one', detail: 'number one'}, {title: 'three', detail: 'number three'} ]en vez de:
[ {title: 'one', detail: 'number one'}, {title: 'two', detail: 'number two'}, {title: 'three', detail: 'number three'} ] cuando intente actualizar el estado usando useState hook, ¡puede pasar una devolución de llamada en lugar de solo un valor! Esa devolución de llamada tiene un accesorio que es el valor anterior de todo. Así que ahora no estás usando el estado de todo en tu useEffect pero aún tienes el valor de todo. y al "no usar el estado en useEffect" no tendrá que pasar todo como una dependencia.
let firstRender = useRef(true); useEffect(()=> { if(firstRender.current) { firstRender.current = false; } else{ if(!modalState) { if(!modalCancel) { let Title = todoTitle; let Detail = todoDetail; setTodo(prevTodo => [...prevTodo, { title: Title.toUpperCase(), detail: Detail }]) } } } }, [modalState, modalCancel, todoTitle, todoDetail])Deseo que esto te ayude.