Tengo una lista de tareas pendientes en mi sitio web que se ve así:
Cuando hago clic en el botón más, aparece una entrada y puedo agregar un elemento que agrega el elemento a la base de datos. El problema es que, si bien agrega el elemento a la base de datos, no aparece en la página web hasta que se actualiza la página. Este es el botón de agregar:
<div> <input type="text" onChange={(e) => setItem(e.target.value)} /> <button onClick={() => itemHandler()}> Add </button> </div>La función itemHandler simplemente actualiza la base de datos con el nuevo elemento pendiente:
async function itemHandler() { setAddItem(false) const res = await fetch('/api/add-todo-item', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ user_id, item }), }) const json = await res.json() if (!res.ok) throw Error(json.message) setItem("") }Pero cuando se ejecuta esta función, la base de datos se actualiza, pero el nuevo elemento no aparece en el sitio web hasta que se actualiza la página.
Los elementos de tareas pendientes se pasan inicialmente al componente funcional como un parámetro:
function ToDoList( {user_id, todo_items} ) { ...Entonces, ¿hay alguna forma de actualizar el componente y, al mismo tiempo, pasar una versión actualizada de los elementos de la base de datos al componente después de que itemHandler los agregue a la base de datos?
agregue try{...}catch(error){...} a su aplicación,
también use el gancho 'useState' como en algo como const [data,setData] = useState([]);
y actualízalo en el try para que lo veas en tu página.
Verifique la respuesta por favor,
Supongo que está obteniendo todos actualizados en la respuesta de esa solicitud.
Por lo tanto, significa que puede almacenar fácilmente los todos nuevos (todos antiguos, incluido el nuevo que acaba de agregar) en el estado de su aplicación, recorrerlos y renderizarlos :)
PD: si no los obtiene en su respuesta de solicitud POST, puede enviar una solicitud GET justo después de su solicitud POST para obtener todos los Todos.