Estoy trabajando en una aplicación de tareas bastante simple. Pero no sin problemas.

Estoy tratando de hacer una solicitud PUT a una base de datos en tiempo real de Google Firebase.

En mi solicitud de creación, creo una ID generada automáticamente que también estoy usando para la solicitud PUT.

Sin embargo, cuando trato de ejecutar la función, devuelve 400-Bad reguest.

Algo como esto sucedió anteriormente con mi función Eliminar. No pude usar el Id, pero al eliminar todo (misma función pero sin el Id en la url) funciona bien.

Aquí hay un código

 export const MarkAsDone = async (id: number) => { // const {id}: any = useParams(); try { await axios.put(`${UrlTodo}/${id}.json`); window.location.reload(); } catch (error) { console.error(error) }}; export const DeleteAll = async () => { try { await axios.delete(`${UrlTodo}.json`); window.location.reload(); } catch (error) { console.error(error) } };

Y aquí hay un código del lado de la vista

 <td> <Button onClick={() => MarkAsDone(todo.id)} className={todo.isComplete ? "d-none" : "btn btn-outline-primary"}>Mark as done</Button> </td> <Button onClick={() => DeleteAll()} className="btn btn-outline-danger">Remove All</Button>

La función DeleteAll() funciona. Pero al intentar eliminar 1 solo objeto, no funciona y devolvería un 400, por lo que supongo que podría haber algo extraño al intentar acceder a un objeto específico por ID.

MarkAsDone() no funciona y devuelve un 400.

Además, al usar la base de datos en tiempo real de Firebase, debe agregar .json al final de cada URL. Solo para dejar las cosas claras al respecto :)

Si alguien tiene alguna idea, por favor hágamelo saber!

¡Gracias!

Editar: intenté pasar datos con un modelo a la solicitud PUT. Agregué esto

 export interface updateTodoModel { id: number; name: string; isComplete: boolean = true; }

son los mismos datos con los que estoy trabajando, pero la única actualización que quiero es hacer que isComplete sea verdadero con solo presionar un botón.

Actualicé la función MarkAsDone() así

 export const MarkAsDone = async (id: number, todo: updateTodoModel) => { // const {id}: any = useParams(); try { await axios.put(`${UrlTodo}/${id}.json`, todo); window.location.reload(); } catch (error) { console.error(error) }};

Aunque sigue siendo el mismo problema. ¿Como se puede hacer esto?