Estoy tratando de actualizar 1 cita dentro de una matriz de "comillas"

 const [quotes, setQuotes] = useState([]); const [quoteToUpdate, setQuoteToUpdate] = useState(initialValues);

Cuando hago clic en un interruptor (casilla de verificación), configuro quoteToUpdate con quoteToUpdate con los datos de cotización seleccionados y actualizo el cambio de verdadero a falso o viceversa.

 const onCheckboxChange = async (e, selectedQuote) => { setQuoteToUpdate({...selectedQuote, [e.target.name]: e.target.checked}); };

El problema que tengo es que, justo después de actualizar quoteUpdate , necesito enviar el objeto actualizado al backend para actualizarlo. Pero dado que el estado de React es sync , el quoteToUpdate no se actualiza instantáneamente, sino que se pone en cola.

Lo que he intentado: he intentado poner la función onSubmit() dentro de un useEffect pero claramente no funciona.

 useEffect(() => { onSubmit(quoteToUpdate); }, [quoteToUpdate])

onSubmit se ve así:

 const onSubmit = (quoteToUpdate) => { axiosWithAuth().put('/quotes/' + quoteToUpdate.id, quoteToUpdate) .then((res) => { const updatedQuote = res.data; setQuotes(quotes.map(quote => ( quote.id === updatedQuote.id ? {...quote, 'is_complete': updatedQuote.is_complete} : quote )) ); const alertContent = `quote updated successfully.`; halfmoon.stickyAlerts = document.getElementsByClassName("sticky-alerts")[0] halfmoon.initStickyAlert({ content: alertContent, alertType: "alert-success", title: "Successfully updated" }) }).catch(error => { console.log(error.message); }); }

Actualizar:

Parece que al hacer clic en el interruptor envía el valor anterior.