Estoy aprendiendo JavaScript/React. Estoy tratando de crear un bucle for simple para el ejemplo de tic-tac-toe en el sitio web de reacción, pero hasta ahora ha sido problemático. Curiosamente, hay varios ejemplos de mapas pero no ejemplos de bucles for.
De todos modos, por lo siguiente:
function Row(props){ function renderSquare (i) { return <Square key={i} value={props.squares[i]} onClick={() => props.onClick(i)} />; } const columns = 3; let ss = []; for(var a = 0, i = props.counter * columns; a < 3; a++, i++){ //Test Code } return ( <div className="board-row"> {ss} </div> ); }Cuando reemplazo "Código de prueba", esto funciona
ss.push(renderSquare(i));pero esto falla
ss.push(<Square key={i} value={props.squares[i]} onClick={() => props.onClick(i)}/>);La segunda opción falla ya que no crea elementos onClick "separados". ¿Cómo puedo hacer que el ejemplo fallido funcione?
Actualización #1
Actualización n. ° 2 Cambié la var para permitir según lo recomendado por @ Matthias247 y ahora funciona: D
function Row(props){ function renderSquare (i) { return <Square key={i} value={props.squares[i]} onClick={() => props.onClick(i)} />; } const columns = 3; let ss = []; for(let a = 0, i = props.counter * columns; a < columns; a++, i++){ ss.push(<Square key={i} value={props.squares[i]} onClick={() => props.onClick(i)}/>); //ss.push(renderSquare(i)); //console.log(i); } return ( <div className="board-row"> {ss} </div> ); }Creo que el problema es que capturas i en el elemento y el cierre onClick . Cambias i durante el bucle for, pero al final es lo mismo para todos los elementos insertados -> props.counter + 3 .
Para solucionarlo, debe crear una instancia única de todos los valores capturados para cada elemento. Esto es exactamente lo que hace con el método renderSquare que crea una nueva instancia de i dentro del cuerpo de la función, que ahora es capturado por el elemento.
Editar:
Usar un enlace let , que crea una nueva instancia de la variable por iteración, también funciona:
for (let a = 0, i = props.counter; a < 3; a++, i++) { ss.push(<Square key={i} value={props.squares[i]} onClick={() => props.onClick(i)}/>); }