在函数React JS组件中使用时，this.state是未定义的

Question

我有下面的React组件，我想从函数randomPosition（）访​​问this.state.board（每个元素为0或1的2D数组）。当我调用randomPosition时，它返回“无法读取未定义的属性状态”。我是否对此关键字做错了什么？

var App = React.createClass({

getInitialState(){

  return {

   board: []

}

},

randomPosition: function(){
//generates a random position on this.state.board array

  var position = [];
  var positionX = null;
  var positionY = null;

  var generatePosition = function(){

    positionX = Math.floor(Math.random() * 64);
    positionY = Math.floor(Math.random() * 64);

    if(this.state.board[positionX][positionY] === 1){

      position.push(positionX, positionY);
      return position;

    } else {

      generatePosition();

    }

  }

  generatePosition();

}


})

感谢您的帮助！

Answer 1

您的generatePosition function将拥有自己的范围，因此此函数中的this将指向其自己的范围，而不是可访问state的外部范围。您可以存储outer scope的引用，然后在此函数中使用它，如

randomPosition: function(){
//generates a random position on this.state.board array

  var position = [];
  var positionX = null;
  var positionY = null;
  var that = this;
  var generatePosition = function(){

    positionX = Math.floor(Math.random() * 64);
    positionY = Math.floor(Math.random() * 64);

    if(that.state.board[positionX][positionY] === 1){

      position.push(positionX, positionY);
      return position;

    } else {

      generatePosition();

    }

  }