<分区>
我正在使用 React.js 创建一个地牢爬虫游戏，并且我正在使用 Array.fill(0) 初始化棋盘。但是当我在二维数组中设置一个元素时，它会将整个数组(列)设置为 'player' 而不是单个元素。我有另一个 createBoard() 函数，注释掉了，它工作正常。那么为什么会发生这种情况，我该如何正确使用 Array.fill？
这是我的 Board 组件:
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;