Creé una lista de tareas pendientes para mi sitio donde el usuario puede agregar y eliminar elementos pendientes y estoy tratando de hacerla para que puedan marcar o desmarcar los elementos según lo necesiten.

En este momento, la capacidad de agregar/eliminar funciona bien y las casillas de verificación actualizan la base de datos cuando se hace clic en ellas como se supone que deben hacerlo, pero el problema es que las casillas de verificación no se actualizan correctamente en el sitio web.

El estado es una matriz de información de elementos pendientes de la base de datos. Entonces, inicialmente, el estado se establece como la información actual de la base de datos:

 const [items, setItems] = useState(todo_items)

donde todo_items es de la base de datos y está estructurado así:

 ``` 0: complete: 0 or a 1 todo_id: Integer todo_item: String 1: complete: 0 or a 1 todo_id: Integer todo_item: String . . . ```

Ahora, una vez que esto se establece como el estado, asigno los elementos pendientes a un formulario:

 <form> {items.map((e) => ( <div id={e.todo_id}> <div> <input type="checkbox" checked={e.complete === 1} onChange={(f) => checkHandler(f.target.checked, e.todo_id)} /> <p>{e.todo_item}</p> </div> </div> ))} </form>

y luego, cuando se marca una casilla de verificación, cambio el estado y actualizo la base de datos para reflejar la nueva representación de todas las casillas de verificación

 async function checkHandler(checked, todo_id){ var updated_todo = items for (var i = 0 ; i < items.length ; i++){ if (items[i].todo_id === todo_id && checked === true) { updated_todo[i].complete = 1; } else if (items[i].todo_id === todo_id && checked === false){ updated_todo[i].complete = 0; } } setItems(updated_todo) // update database below... }

Pensé que esto actualizaría automáticamente las casillas de verificación en el sitio web cada vez que se actualiza este estado, pero no vuelve a asignar los elementos pendientes en el formulario cuando se cambia el estado de los elementos.