this.state ist nicht definiert, wenn in der Funktion verwendet React JS-Komponente

Question

Ich habe die React-Komponente unten und ich möchte this.state.board (ein 2D-Array mit 0 oder 1 für jedes Element) von einer Funktion randomPosition() zugreifen. Wenn ich randomPosition aufrufen, gibt es zurück "kann den Eigenschaftsstatus von undefined nicht lesen". Mache ich etwas falsch mit diesem Keyword?

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(); 

} 


}) 

danke für die Hilfe!

Answer 1

Ihr generatePosition function wird seinen eigenen Bereich haben und daher wird this innerhalb dieser Funktion auf seinen eigenen Bereich zeigen, anstatt auf den äußeren Bereich, auf den state zugegriffen werden kann. Sie können die Referenz des outer scope speichern und verwenden Sie dann, dass innerhalb dieser Funktion wie

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(); 

    } 

    }