Redux:在二维数组上使用扩展运算符

IT技术 javascript arrays reactjs redux spread-syntax
2021-05-11 18:06:27

React.js 的新手,我很难在我的减速器中使用扩展运算符来更新我的具有 2D 数组属性的状态。

例如初始状态是这样的:

let initialState = {
    grid: new Array(5).fill(new Array(5).fill(0)),
    player: { coords: [2,3], health: 100 }
}

绑定动作后,假设有效载荷转到PRESS_LEFT

case PRESS_LEFT: {
  let oldCoords = [state.player.coords[0], state.player.coords[1]];
  let newCoords = [state.player.coords[0], state.player.coords[1]-1];
  let thereIsWall = validateWall(state.grid, newCoords);
  if (thereIsWall){
    return state
  } else{
    return{
      ...state,
      player: { ...state.player, coords: newCoords },
      grid: { ...state.grid, state.grid[oldCoords[0]][oldCoords[1]] = 1 }
    }
  }
}

我可以更新玩家的状态,但不能更新网格。基本上我想更新坐标oldCoords并将其分配给 1。

1个回答

这是因为旧值被分配给 null

let initialState = { grid: new Array(5).fill(new Array(5).fill(0)), player: { coords: null, health: 100 } }

然后您尝试读取 null 的第零个索引,这将引发错误。

let oldCoords = [state.player.coords[0], state.player.coords[1]];

更新:

网格是一个数组,但您正在返回对象..更改为以下语法

grid: [ ...state.grid, state.grid[oldCoords[0]][oldCoords[1]]=1 ]