Se supone que este código agrega nuevas tareas al estado y mantiene los objetos anteriores, las publicaciones anteriores sobre esto han llevado al mismo problema de que simplemente no se agregará.
function App() { var [tasks, setTasks] = useState([ { id: uuidv4(), text: 'Meeting at place', specify: 'todo', }, { id: uuidv4(), text: 'Shopping', specify: 'inprogress', }, { id: uuidv4(), text: 'Appointment', specify: 'complete', }, ]) //Add Task const newTask = (text) => { const id = uuidv4(); var specify = 'todo' const makeTask = { id, ...text, specify } console.log(makeTask) console.log([...tasks, makeTask]) setTasks(tasks => [...tasks, makeTask]) console.log(tasks) }cuando registro lo que hay dentro de la función de configuración, muestra los 4 pero no se guarda en las tareas
Mi función de arrastrar y soltar, que filtra por ID, funciona con los objetos literales predefinidos, pero no con las nuevas tareas añadidas, y en su lugar devuelve indefinido con nuevas tareas.
Editar: useEffect fue la solución para mostrar correctamente mi estado para aquellos con el mismo problema. Mi problema era más complejo debido a que reaccioné dnd y encontré una solución aquí React Hooks: ¿No se puede acceder a la variable useState actualizada fuera de useEffect? .
El gancho React setState se ejecuta de forma asíncrona, por lo que después de la actualización, no puede acceder al estado actualizado en esa función. si desea acceder a las tareas actualizadas, puede usar useEffect hook:
const newTask = (text) => { const id = uuidv4(); var specify = 'todo' const makeTask = { id, text, specify } setTasks(tasks => [...tasks, makeTask]) } useEffect(() => { console.log(tasks); }, [tasks]);Es posible que desee darle una oportunidad a use-immer para manejar los estados de objetos/matrices.
El gancho useImmer se comporta igual que el gancho useState y actualiza los estados de su objeto sin problemas.
Este es su código a continuación pero con useImmer
import { useImmer } from "use-immer"; function App() { const [tasks, updateTasks] = useImmer([ { id: uuidv4(), text: 'Meeting at place', specify: 'todo', }, { id: uuidv4(), text: 'Shopping', specify: 'inprogress', }, { id: uuidv4(), text: 'Appointment', specify: 'complete', }, ]) //Add Task const newTask = (text) => { const id = uuidv4(); const specify = 'todo' const makeTask = { id, ...text, specify } updateTasks(draft => draft.push(metaTask)); } }