Soy nuevo en ReactJS, estoy tratando de crear 10 botones con bucles for y establecer una variable con el número entero del bucle for, sin embargo, la función setMqty(i) siempre devuelve 11 para todos los botones. ¿Cuál es la forma correcta de hacer esto?
var qtyButtons = []; for(var i = 1; i < 11; i++) { qtyButtons.push(<div onClick={(btn) => {qtyBtnToggle(btn);setMqty(i); }} > {i} </div>) }Gracias de antemano.
Creo que usar una función de mapa es la forma correcta de hacerlo.
Por lo tanto, debe generar un rango de números de cualquier elemento para poder realizar una función de mapa.
Entonces, si estuviera en tu lugar, lo habría hecho así:
const [mqty, setMqty] = useState(0); // ... const qtyButtons = Array(10).fill().map((_, i) => { const value = parseInt(i); return ( <button onClick={handleClick(value)}> {value} </button> ); }); // ... // The trick here is that function returning another function, beware of that const handleClick = (i) => () => { setMqty(i); };El problema principal aquí tiene que ver con el alcance. Permítanme reducir su ejemplo a un ejemplo más mínimo:
var qtyCallbacks = []; for (var i = 1; i < 11; i++) { qtyCallbacks.push(() => console.log(i)); } for (const callback of qtyCallbacks) { callback(); } ¿Qué está yendo mal aquí? ¿Por qué solo registra 11 y no 1-10 ?
El problema es que una variable definida con var tiene el alcance de la función más cercana o global si no está en una función. Entonces, ¿qué significa esto?
Significa que cada iteración en su bucle for se refiere a la misma i . Esto no es un problema si usa directamente i .
for (var i = 1; i < 11; i++) { console.log(i); // logs 1-10 } Sin embargo, se convierte en un problema si hace referencia a i en el código que se ejecuta en un momento posterior. La razón por la que el fragmento inicial solo registra 11 es porque se crean todas las devoluciones de llamada, cada una de las cuales hace referencia a la misma i . Entonces, cuando invoque cada devolución de llamada después de que se complete el bucle for, todos se referirán al valor actual (que es 11 ).
for (var i = 1; i < 11; i++) { } console.log(i); // logs 11 // so if we invoke the callbacks here they all log 11 Entonces, ¿cómo resuelves este problema? La solución más simple es probablemente reemplazar var con let . let creará una nueva variable para cada iteración for. Lo que significa que cada devolución de llamada creada se referirá a su propia i y no a una i compartida. Esto también significa que no puede acceder a i fuera del bucle for.
var qtyCallbacks = []; for (let i = 1; i < 11; i++) { qtyCallbacks.push(() => console.log(i)); } for (const callback of qtyCallbacks) { callback(); } console.log(i); // expected error, `i` is only available within the for-blockSupongo que setMqty es un estado. ¿Puedes intentarlo?
setMqty(currentValue=> currentValue+1)