reactjs - reactjs 在状态中设置了错误的值
问题描述
我对这个官方教程很陌生,并尝试了运气:https ://reactjs.org/tutorial/tutorial.html 。我让它工作了。现在我正在试验它,并试图用两个循环生成井字游戏场。
当我点击一个字段时,列中所有三个字段的值都被设置(只有我点击的那个应该被设置)和状态中的初始历史条目(state.history[0].squares with all fields' null') 被覆盖,这不应该发生。
function Square(props) {
return (
<button className="square" onClick={props.onClick}>
{props.value}
</button>
);
}
function Board(props) {
const rows = [];
for(let i=0; i<3; i++) {
const cols = [];
for(let j=0; j<3; j++) {
cols.push(
<Square
key={i + "_" + j}
value={props.squares[i][j]}
onClick={() => props.onClick(i, j)}
/>
);
}
rows.push(
<div key={i} className="board-row">
{cols}
</div>
);
}
return (<div>{rows}</div>);
}
class Game extends React.Component {
constructor(props) {
super(props);
this.state = {
history: [{
squares: Array(3).fill(Array(3).fill(null)),
field: '/'
}],
stepNumber: 0,
xIsNext: true,
};
}
handleClick(i, j) {
const history = this.state.history.slice(0, this.state.stepNumber + 1);
const current = history[history.length - 1];
const squares = current.squares.slice();
if(calculateWinner(squares) || squares[i][j]) {
return;
}
squares[i][j] = this.getNexPlayer();
this.setState({
history: history.concat([{
squares: squares,
field: '(' + (j+1) + ',' + (i+1) + ')',
}]),
stepNumber: history.length,
xIsNext: !this.state.xIsNext,
});
}
jumpTo(step) {
console.log(this.state);
this.setState({
stepNumber: step,
xIsNext: (step % 2) === 0,
});
}
getNexPlayer() {
return this.state.xIsNext ? 'X' : 'O';
}
render() {
const history = this.state.history;
const moves = history.map((step, move) => {
const desc = move ? 'Go to move #' + move + ' ' + step.field : 'Go to game start';
return (
<li key={move}>
<button
className={this.state.stepNumber === move ? 'bold' : ''}
onClick={() => this.jumpTo(move)}
>
{desc}
</button>
</li>
);
});
const current = history[this.state.stepNumber];
let status = 'Next player: ' + this.getNexPlayer();
const winner = calculateWinner(current.squares);
if(winner) {
status = 'Winner: ' + winner;
} else if(history.length === 10) {
status = 'DRAW';
}
return (
<div className="game">
<div className="game-board">
<Board
squares={current.squares}
onClick={(i, j) => this.handleClick(i, j)}
/>
</div>
<div className="game-info">
<div>{status}</div>
<ol>{moves}</ol>
</div>
</div>
);
}
}
// ========================================
ReactDOM.render(
<Game />,
document.getElementById('root')
);
function calculateWinner(squares) {
const solutions = [
[[0,0], [0,1], [0,2]],
[[1,0], [1,1], [1,3]],
[[2,0], [2,1], [2,3]],
[[0,0], [1,0], [2,0]],
[[0,1], [1,1], [2,1]],
[[0,2], [1,2], [2,2]],
[[0,0], [1,1], [2,2]],
[[2,0], [1,1], [0,2]],
];
for(let i = 0; i < solutions.length; i++) {
const [a, b, c] = solutions[i];
if(squares[a[0]][a[1]] && squares[a[0]][a[1]] === squares[b[0]][b[1]] && squares[a[0]][a[1]] === squares[c[0]][c[1]]) {
return squares[a[0]][a[1]];
}
}
return null;
}
想法是建立一个井字游戏,保存历史中的所有动作,您可以在历史中的动作之间切换。
我错过了什么?
谢谢
解决方案
数组是可变的,因此对 1 个数组的 3 个引用都指向同一个数组 -squares: Array(3).fill(Array(3).fill(null))
问题中的代码类似于:
const a = [null, null, null]
const b = [a, a, a]
b[0][0] = 1
console.log(a) // [1, null, null]
使用显式二维数组可能会更好[[0,0,0], [0,0,0], [0,0,0]]
推荐阅读
- python - 关于颜色的散点图图例 [Python3]
- python - 如何更新循环中创建的按钮和标签的 Tkinter 参数?
- javascript - 减少电报机器人脚本以使其可扩展 NodeJS
- python - Pandas 多级分组按日期、年份、保存小时
- javascript - 如何将 JS 中的二维数组与字符串和数字相加
- javascript - Error using library: Invalid hook call. Hooks can only be called inside of the body of a function component
- python - Django migrate won't run new migration when migration exists
- python - How to resolve PIL unidentified image error in flask app
- firefox - Firefox 只显示空白页 - 甚至 about:config 也只是白色的
- dynamic-sql - Use stored proc parameters in Select dynamic SQL