我正在使用 React.js 创建一个地下城爬行游戏,并使用 Array.fill(0) 初始化棋盘。但是当我在二维数组中设置一个元素时,它将整个数组(列)设置为'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;
您正在使用Array#fill正确。Array#fill
用相同的值填充数组单元格:
- 创建子数组 - Array(col).fill(0)
- 所有行数组都用数组引用填充 - Array(row).fill(Array(col).fill(0))
为了防止这种情况,您可以使用其他数组创建方法,即创建而不是克隆值。例如Array#from:
const row = 10;
const col = 5;
const result = Array.from({ length: row }, () => new Array(col).fill(0));
result[0][2] = 5
console.log(result);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)