Cuando el usuario hace clic en el botón Votar a favor, el procesamiento incrementa el valor, pero no actualiza el estado de los datos.
Aunque, si el usuario hace clic en votar dos veces (por ejemplo: 50, 51, 52), guarda el valor como 51.
const [data, setData] = useState(props); const [update] = useUpdateSnippet(); // TODO: Implement upvote functionality const onClick = useCallback(() => { setData(previousData => { return { ...previousData, votes: data.votes+1 } }); console.log(data); update({ snippetId: data.id, body: data, onUpdated: () => {} }); }, [update, data] )setState tiene un argumento adicional en el que puede pasar una función de devolución de llamada, que se garantiza que se ejecutará justo después de que se haya actualizado el estado. Algo como esto: setState(updater, callback) .
Del documento oficial :
una devolución de llamada de setState (setState(updater, callback)), ... que se garantiza que se activará después de que se haya aplicado la actualización.
Aquí está mi fragmento que podría aplicar:
setData({ ...previousData, votes: data.votes+1 }, () => { console.log(data); // your update function call update(); });La actualización de estado no ocurre sincrónicamente, por lo que la update no obtendría el estado data actualizado.
Almacene los datos actualizados en una variable y páselo a setData así como a update .
const [data, setData] = useState(props); const [update] = useUpdateSnippet(); // TODO: Implement upvote functionality const onClick = useCallback(() => { const newData = { ...data, votes: data.votes + 1 }; setData(newData); console.log(data); update({ snippetId: newData.id, body: newData, onUpdated: () => {} }); }, [update, data]);