Question

我正在使用Redux遇到非常非常奇怪的行为。基本上我有一个带静态地图的游戏，玩家在地图上四处移动。地图和播放器由彩色div表示。这就是我尝试做的所有事情，而且我能够简单地让它发挥作用。

我通过首先获取空地图（这是一个硬编码的const数组数组）然后将玩家的（新）位置添加到正确的坐标来创建运动。然后我将它渲染到React中的视图层。具有玩家位置的输出新地图不与空地图相同。

然而，Redux正在发生一些非常奇怪的事情，当我渲染它时，它在某种程度上更改硬编码的const数组数组。放入大量的console.log来查看变量的变化，确认这就是正在发生的事情。有人可以看一下这个代码：

http://codepen.io/swyx/pen/MJbezj?editors=1010

教我如何用我的可变const来追踪究竟是怎么回事？

编辑：这里是相关代码（constMap是数组的const数组）

const InitMap = function() {
  console.log('InitMap')
  return constMap  /// why is this changing every single time???
}

后来与其他减速器合并：

const rootReducer = combineReducers({
  gamemap: InitMap,
  user: InitUser,
  userMove: UserMove
});

然后在相关的mapStateToProps函数中使用：

function GMmapStateToProps(state){
  //from here goes into this.props
  console.log('GMmapStateToProps')
  console.log(state)
  console.log(constMap)
  var newgamemap = constMap, //state.gamemap also doesnt work,
      newuser = state.user
  console.log(newgamemap)
  if (state.userMove) {
    //check if is whitespace
    var x2 = newuser.location.x + state.userMove.vector.x
    var y2 = newuser.location.y + state.userMove.vector.y
    if (newgamemap[y2][x2] === 1) {
      newuser.location.x = x2
      newuser.location.y = y2
      //add user
      newgamemap[newuser.location.y][newuser.location.x] = 9
    }
  } else {    
    //add user
    newgamemap[newuser.location.y][newuser.location.x] = 9
  }
  console.log(newgamemap)
  return{
    xgamemap: newgamemap,
    user: newuser
  }
}

荒谬的是，constMap的价值每次调用都会不断变化！为什么/怎么样？它让我质疑我的理智。

Answer 1

那是因为const不会创建不可变的。来自MDN，

const声明创建对值的只读引用。它并不意味着它拥有的值是不可变的，只是不能重新赋值变量标识符。例如，如果内容是一个对象，这意味着对象本身仍然可以被更改。

以下是有效的

const myArr = []
myArr.push(1)
myArr = [1,2,3] //throw error

const myObj = {}
myObj['test'] = true

如果需要，请查看Object.freeze

Answer 2

使用@ cartant的帮助 - 这里的问题是我不知道javascript通过引用而不是值传递数组和对象。所以当然通过为我的数组指定一个不同的名称，我没有做任何改变最终结果的事情。当然javascript没有原生的深拷贝方法，因为javascript。所以我想如果未来的人遇到这个问题，那就去深层复制路线：What is the most efficient way to deep clone an object in JavaScript?

为什么Redux能够从初始化缩减器更改我的CONSTANT输出？

2 个答案: