Чтобы предотвратить это, вы можете использовать другие методы создания массива, которые создают вместо клонирования значение. Например
даю игру для подземелья, используя React.js, и инициализирую доску с помощью Array.fill (0). но когда я устанавливаю элемент внутри 2d массива, он устанавливает весь массив (столбец) в'player'
вместо единственного элемента. у меня есть другойcreateBoard()
функция, закомментированная, которая работает правильно. Так почему же это происходит и как я могу правильно использовать Array.fill?
Вот мой компонент платы:
import React, {Component} from 'react';
import Cell from './Cell';
class Board extends Component {
constructor(props) {
super(props);
const dim = 10;
let board = this.createBoard(dim, dim);
this.state = {
board: board,
};
}
createBoard = (row, col) => {
return Array(row).fill(Array(col).fill(0));
}
// createBoard = (rows, cols) => {
// let board = [];
// for (let i = 0; i < rows; i++) {
// let row = [];
// for (let j = 0; j < cols; j++) {
// row.push(0);
// }
// board.push(row);
// }
// console.log(board);
// return board;
// }
movePlayer = () => {
}
componentDidMount() {
this.setPiece(this.props.player);
}
setPiece = (loc) => {
let brd = this.state.board;
const row = loc[0];
const col = loc[1];
console.log('row: '+row+' col: '+col+' ==='+brd[row][col]);
brd[row][col] = 'player';
console.log('setPiece: ',brd);
this.setState({board: brd});
}
renderCell = (cell) => {
switch(cell) {
case 0:
return 'floor';
case 1:
return 'wall';
case 'player':
return 'player';
default:
return 'floor';
}
}
render() {
return (
<div className='board'>
{this.state.board.map((row, i) => {
return row.map((cell, j) => {
return (
<Cell
key={[i, j]}
loc={[i, j]}
type={this.renderCell(cell)}
/>
);
})
})}
</div>
);
}
}
export default Board;