this.setState ist keine Funktion setInterval reagieren

Question

Ich versuche, ein kleines Schlangenspiel zu schreiben und Probleme mit der Änderung der Richtung der Schlange. Ich habe die gesamte Komponente unten eingefügt.

Ich sehe die folgenden Fehler:

this.setState is not a function

Dies wird in den changeDirection Verfahren verursacht wird.

ansehen Code unten:

export default class Example extends Component { 

constructor(props){ 
    super(props); 
    this.state = { 
     snakeLeftPos: 0, 
     snakeDirection: 'right', 
     boardWidth: 20, 
     boardHeight: 20 
    }; 
    } 

componentDidMount() { 
    document.onkeydown = this.changeDirection; 
    setInterval(() => { 
     this.moveSnake(); 
    }, 1000); 
} 

moveSnake() { 
    const { boardWidth, snakeDirection} = this.state; 

    if(snakeDirection === 'right') { 
     this.setState((prevState) => { 
     return snakeDirection: prevState.snakeDirection + 20 
     }); 
    } 

    //same logic for other directions 
    } 

    changeDirection(e) { 
    switch(e.keyCode) { 
     case 37: 
     this.setState(() => { 
     return { 
      snakeDirection: 'left' 
     } 
     }); 
     break; 

     //other switch cases omitted for right, up, down 
    } 
    } 

    render() { 

    const { snakeLeftPos, boardHeight, boardWidth } = this.state; 
    return(
     <div> 
     <Snake snakeLeftPos={snakeLeftPos} /> 
     <Board boardHeight={boardHeight} boardWidth={boardWidth}/> 
     </div> 
    ) 
    } 

} 

Answer 1

dies nicht zu Klasse Funktionen verbinden, haben Sie es im Konstruktor manuell zu tun,

try this:

constructor(props){ 
    super(props); 
    this.state = { 
     snakeLeftPos: 0, 
     snakeDirection: 'right', 
     boardWidth: 20, 
     boardHeight: 20 
    }; 
    this.moveSnake = this.moveSnake.bind(this); 
    }