这是我制作蛇形游戏的减速机。基本上,每当我想重置游戏时,我都会将状态更新为INITIAL_STATE
,如NEW_GAME
所示,但每当MOVE_SNAKE
触发时,它似乎都在修改INITIAL_STATE
,所以我基本上将它传递给当前状态,而NEW_GAME
什么也没做。
我添加了console.log(INITIAL_STATE.coords[0])
来确认,并且只要蛇移动,INITIAL_STATE
也会更新到当前状态。为什么是这样?我在一个tic tac toe游戏中做过类似的事情,但是现在它还没有用呢?
// REDUCER
const INITIAL_STATE = {
coords: [
[1, 0],
[1, 1],
[1, 2]
]
};
export default function(state = INITIAL_STATE, action) {
console.log(INITIAL_STATE.coords[0]);
switch(action.type) {
case 'MOVE_SNAKE':
return {
...state,
coords: action.coords
}
case 'NEW_GAME':
return INITIAL_STATE;
}
return state;
}
// ACTION CREATORS
export function moveSnake(snake) {
let { coords, direction } = snake;
let headCoords = coords[coords.length-1];
let newHead = () => {
if(direction === 'DOWN') return [headCoords[0], headCoords[1]+1];
if(direction === 'UP') return [headCoords[0], headCoords[1]-1];
if(direction === 'LEFT') return [headCoords[0]-1, headCoords[1]];
if(direction === 'RIGHT') return [headCoords[0]+1, headCoords[1]];
};
coords.push(newHead());
coords.shift();
return {
type: 'MOVE_SNAKE',
coords
}
}
// COMPONENT CALL LOOKS LIKE THIS
this.props.moveSnake(this.props.snake);
我已尝试在所有内容上使用Object.assign()
,但仍然在弄乱INITIAL_STATE
。
答案 0 :(得分:2)
您改变状态Object.assign()
是好的,但在使用数组时,您应该使用concat
,slice
和filter
!
让我们说你有一个数组
let a = {name:"bob", things: [1,2,4]}
let b = Object.assign({}, a, {name: "joe"})
在上面的示例中,您可能认为b
独立于a
,但如果我们执行b.things.push(3)
之类的操作,您会看到a.things
变!
要停止此操作,请确保您使用slice
这样b.things = a.things.slice()
。希望这清除了它;)
现在,您的代码很难弄清楚,但是您知道自己在哪里工作并分配数组,因此请确保您同时使用slice()
,不仅Object.assign()
。