En mi componente de reacción, estoy tratando de hacer una copia de una matriz. Pero la función sigue fallando en el punto en el que realmente llamo al método de división. Aquí está mi código completo para un mejor contexto
const Board = ()=>{ const [squares, setSquares] = useState(Array(9).fill("")) const [isX , setIsX] = useState(true) const [stepNumber, setStepNumber] = useState(0) const [winner, setWinner] = useState(null) console.log(`squares is ${Array.isArray(squares)}`, squares.slice()) const onClick = (i)=>{ console.log("On CLick") if(winner || stepNumber>9) return; console.log(squares) const newSquares = squares.slice() (isX) ? newSquares[i] = "X" : newSquares[i]= "O" setIsX(!isX) setWinner(newSquares) if(winner){ console.log(winner) } setSquares(newSquares) setStepNumber(stepNumber+1) } return( <div className = "board"> {squares.map((square , i) => { return( <Square key={i} data-key={i} value={square} onClick = {()=>onClick(i)} />) })} </div> ) } La línea donde declaro newSquares sigue fallando con el error: TypeError: squares.slice(...) is not a function . ¿Puede alguien decir qué estoy haciendo mal?
EDITAR: Aquí está la salida de cuadrados ['', '', '', '', '', '', '', '', '']
En una declaración condicional de una línea, está haciendo mal la asignación. El problema está en esta línea:
(isX) ? newSquares[i] = "X" : newSquares[i]= "O"Cambia eso a:
newSquares[i] = isX ? "X" : "O" En lugar de .slice() , cambiaría los newSquares de esta manera:
const newSquares = squares.map((sq, index) => index === i ? (isX ? "X" : "O") : sq)