Normalmente, cuando necesitamos actualizar un estado en un componente funcional, hacemos algo como esto:
function Example() { const [count, setCount] = React.useState(0); return (<div><p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div>); }¿Cuándo y por qué necesitaremos usar el formulario de actualización funcional?
function Example() { const [count, setCount] = React.useState(0); return (<div><p>You clicked {count} times</p> <button onClick={() => setCount(c=>c + 1)}> Click me </button> </div>); }Use el formulario de función cuando el colocador pueda cerrar sobre un valor de estado anterior.
Por ejemplo, si se inicia una solicitud asíncrona y desea actualizar el estado después de hacerlo, la solicitud que se realizó tendrá el alcance del estado tal como estaba al comienzo de la solicitud, que puede no ser el mismo que el de la mayoría. estado de renderizado actualizado.
Es posible que también deba usar el formulario de función si se acaba de actualizar el mismo valor de estado, por ejemplo
setValue(value + 1); // complicated logic here if (someCondition) { setValue(value => value + 1); } porque la segunda llamada de setValue se cierra sobre un value anterior.
Las actualizaciones de estado pueden ser asincrónicas:
https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous
useState es lo mismo que setState en esta condición.
Puede ver dos veces el estado diferente cuando se establece una llamada:
<button onClick={() => { setCount(count + 1); setCount(count + 1); }} ></button>; <button onClick={() => { setCount(c => (c + 1)); setCount(c => (c + 1)); }} ></button>;