Estoy haciendo un juego de sudoku y tengo una variable para el tablero en este momento y el tablero original. Cuando el usuario ingresa un número, el tablero se actualiza pero, por alguna razón, la variable originalBoard también lo hace. Solo cambio el valor del tablero, así que no estoy seguro de por qué también se actualiza originalBoard.

Codigo de entrada:

 export default function Block(props) { let { boxNumber, blockNumber } = props const { board, originalBoardSlots, isSolved } = useBoard() const dispatch = useDispatch() const number = board[boxNumber][blockNumber] let numberInput; let border = "" if(blockNumber === 2 || blockNumber === 5) border += " b-right" if(boxNumber === 2 || boxNumber === 5) border += " b-bottom" if(originalBoardSlots[boxNumber][blockNumber]){ numberInput = ( <input type="number" className={'number og-number' + border} value={number} min="0" max="9" disabled /> ) }else { numberInput = ( <input type="number" className={'number non-og-number' + border} value={number !== 0 ? number : ""} min="0" max="9" onChange={(e) => handleChange(e)} disabled={isSolved} /> ) } const handleChange = (e) => { const newNumber = e.target.value === "" ? 0 : parseInt(e.target.value) if(newNumber <= 9 && newNumber >= 0){ dispatch({ type: "set-number-slot", payload: { boxNumber: boxNumber, blockNumber: blockNumber, number: newNumber } }) } } return ( numberInput )}

código reductor:

 case "set-number-slot": const { boxNumber, blockNumber, number } = action.payload state.board[boxNumber][blockNumber] = number const newBoard = state.board return { ...state, board: newBoard }

función para establecer variables originalmente:

 export default async function getBoard(){ const response = await fetch("https://sugoku.herokuapp.com/board?difficulty=easy"); const data = await response.json(); const board = await data.board const originalBoardSlots = await board.map(box => { return box.map(block => block !== 0) }) const state = { board: board, originalBoard: board, originalBoardSlots: originalBoardSlots } return state}