Tengo una lista de tareas pendientes y después de agregarle un elemento en el componente secundario, el cambio no se refleja de inmediato. Tengo que recargar manualmente la página para ver el cambio. La estructura es algo como esto.
ToDo(Parent Componenet) -> Todoi(Child Component)Estoy actualizando datos en el componente secundario pero, como dije antes, no refleja el cambio a menos que vuelva a cargar la página manualmente. Si de alguna manera puedo cambiar el estado en el componente principal a través del componente secundario, el componente se recargará solo, pero no puedo hacerlo. Aquí está la parte donde estoy actualizando la lista.
const handleList= (e) => { e.preventDefault(); console.log(e); console.log(addtodo); axios.post('/list',{ data:addtodo, userid:username }).then(function(res){ if(res.data === "ToDo Updated"){ navigate(`/todo/${username}`); } }); }¿Qué debo hacer para lograrlo?
Puede pasar el setter de estado a su componente secundario y luego agregar la nueva entrada en su función de publicación:
const handleList= (e) => { e.preventDefault(); console.log(e); console.log(addtodo); axios.post('/list',{ data:addtodo, userid:username }).then(function(res){ if(res.data === "ToDo Updated"){ setList(prevState => prevState.concat(addtodo)); } }); } <YourComponent setList={setList}/>O puede agregar una función de devolución de llamada a su componente que se ejecuta en una solicitud exitosa de la siguiente manera:
const handleList= (e) => { e.preventDefault(); console.log(e); console.log(addtodo); axios.post('/list',{ data:addtodo, userid:username }).then(function(res){ if(res.data === "ToDo Updated"){ onSuccess(addtodo) } }); } <YourComponent onSuccess={(todo)=>setList(prevState => prevState.concat(todo))}/>No estoy seguro de cómo se ve su estado/tipo de datos, ¡pero espero que esto ayude!
Por lo general, un componente de reacción se volverá a renderizar en dos situaciones:
Por lo tanto, podríamos activar manualmente el cambio de estado del componente principal en el componente secundario o actualizar la respuesta del servidor como accesorios del componente principal.
No sé cómo maneja sus datos en el componente principal, pero supongo que es posible que deba hacer que React detecte la actualización de sus datos.