ComponentDidMount() funktioniert nicht

Question

Ich mache ein Spiel mit matter.js in reactjs.

Ich habe ein Problem, wo ich nichts in der render() zurückgeben kann.

Wahrscheinlich liegt das daran, dass matter.js einen eigenen Renderer hat.

Also habe ich nicht irgendwie in die Render-Sektion zurückkehren.

Wenn ich nichts in der Render-Abschnitt componentDidMount zurückgeben werde nicht ausgeführt.

Ich kann ComponentDidMount() nicht ausführen und ich kann keine Funktion aufrufen, obwohl ich es binde.

Ich rufe eine start_game() -Funktion auf, um das Spiel zu starten, aber jede andere Funktion, die ich innerhalb von start_game() aufruft, besagt, dass keine solche Funktion existiert, obwohl ich sie in der Klasse deklariert habe.

import React, { Component } from 'react'; 
import Matter from 'matter-js'; 
const World = Matter.World; 
const Engine = Matter.Engine; 
const Renderer = Matter.Render; 
const Bodies = Matter.Bodies; 
const Events = Matter.Events; 
const Mouse = Matter.Mouse; 
const MouseConstraint = Matter.MouseConstraint; 
const Body = Matter.Body; 

class Walley extends Component 
{ 
    constructor(props) 
    { 
     super(props); 

     this.world = World; 
     this.bodies = Bodies; 
     this.engine = Engine.create(
      { 
       options: 
        { 
         gravity: { x: 0, y: 0,} 
        } 
      }); 
     this.renderer = Renderer.create(
      { element: document.getElementById('root'), 
       engine: this.engine, 
       options: 
        { 
         width: window.innerWidth, 
         height: window.innerHeight, 
         background: 'black', 
         wireframes: false, 
        } 
      }); 

     this.state = { 
      play_game: false, 
      score:0, 
       }; 


     this.play_game=this.play_game.bind(this); 
    } 

    play_game(){ 

      this.setState 
      ({ 
       score: 50, 
      }); 

     } 

    startGame() 
    { 

     console.log(this.state.play_game); 
     //don't know how here the value of play_game is set to true even it was false in componentWillMount() 
     if(this.state.play_game){ 
      this.play_game(); 
     //unable to access play_game 
     } 

    } 
    componentWillMount() 
    { 
     if (confirm("You want to start game?")) 
     { 
      this.setState({play_game: true}); 
     } 
     console.log(this.state.play_game); 
     //even though play_game is set true above yet output at this console.log remains false 
    } 

    render() 
    { 
     if(this.state.play_game) 
     this.startGame(); 
    } 

    componentDidMount() 
    { 
     //unable to access 
     console.log('Did Mount'); 
    } 
} 

export default Walley; 

Answer 1

render Bedarf eine reine Funktion sein, kann man nicht startGame ruft von innen render Sinne sollte. Ich denke, du möchtest etwas näher zu diesem:

// remove this 
// componentWillMount() {} 

componentDidMount() { 
    if (confirm("You want to start game?")) { 
    this.setState({play_game: true},() => { 
     console.log(this.state.play_game); 
    }); 
    startGame(); 
    } 
} 

render() { 
    // eventually you will want to return a div where you can put your matter.js output 
    return null; 
}