¿Alguien puede explicar por qué funciona este código?
import { useState } from 'react'; export default function RandomList() { const [numbers, setNumbers] = useState([]); const addNumber = () => { setNumbers(whatever => { return [...whatever, Math.random()]; }); }; return ( <div> <h1>Random Numbers</h1> <button onClick={addNumber}>Add a Number</button> <ul> {numbers.map((number, index) => ( <li key={index}>{number}</li> ))} </ul> </div> ); }A saber:
(1) ¿Dónde se almacena whatever que sea, está en un cierre dentro de la función? ¿O es simplemente un parámetro temporal que se utiliza para actualizar el estado interno de los numbers ?
(2) ¿Hay alguna ventaja en enviar una función al setter useState como en el código anterior, en lugar de hacer esto?
numbers.push(Math.random()); setNumbers([...numbers]);¿Dónde está todo lo que se almacena,
whatever que sea el argumento de la función que ha creado. React llamará a su función, pasando el valor actual del estado como ese argumento, y luego devolverá lo que desea que sea el nuevo estado.
¿Hay alguna ventaja en enviar una función al setter useState como en el código anterior, en lugar de hacer esto?
La versión de la función de establecer estado garantiza que está utilizando el último valor del estado, por lo que hace imposible una categoría de errores relacionados con variables de cierre obsoletas.
Por ejemplo, si intenta establecer el estado dos veces seguidas sin usar la función, el segundo estado establecido sobrescribirá al primero y solo obtendrá un número nuevo:
setNumbers([...numbers, Math.random()]); setNumbers([...numbers, Math.random()]);Pero si usa la versión de la función en su lugar, mantendrá ambos cambios:
setNumbers(prev => [...prev, Math.random()]); setNumbers(prev => [...prev, Math.random()]);Por supuesto, probablemente no escribirá dos líneas de código como esa una al lado de la otra, pero en componentes complicados puede obtener un comportamiento similar, solo que las líneas de código no están tan obviamente relacionadas.
¿Hay alguna ventaja en enviar una función al setter useState como en el código anterior, en lugar de hacer esto?
Cuando setNumbers([...numbers]); actualiza el estado, los cambios no se reflejan inmediatamente en la variable de recuento. Más bien, React programa una actualización de estado, y durante la próxima representación en la instrucción const [numbers, setNumbers] = useState([]); el gancho asigna a los números el nuevo valor de estado.
entonces, para evitar esta naturaleza asíncrona, pasamos la devolución de llamada a setNumber();