, wie der Staat in reactjs

Question

import React from 'react'; 
 
import ReactDOM from 'react-dom'; 
 
import {User} from './components/User'; 
 
import {DefaultGame} from './components/DefaultGame'; 
 
import {EndGame} from './components/endGame'; 
 

 
class Game extends React.Component { 
 
    constructor(props) { 
 
     super(props); 
 
     this.state= { 
 
      matchResults:undefined, 
 
      gameStatus:undefined, 
 

 
     };//end if state 
 

 
    }//end of constructor 
 

 
    startGame(event) { 
 
     console.log('the game is starting'); 
 
     this.setState({ 
 
      gameStatus:true 
 
     }) 
 
    } 
 

 
    endGameUser(results) { 
 
     console.log('clicked end Game', results); 
 

 
     this.setState({ 
 
      gameStatus:false, 
 
      matchResults:'hello' 
 
     }); 
 

 
     console.log(this.state); 
 
    } 
 

 
    render() { 
 

 

 

 
      if (this.state.gameStatus === true) { 
 
       console.log('returning this'); 
 

 
        return (<User name={prompt('What is your name')} endGame={this.endGameUser.bind(this)} />) 
 
      } else if (this.state.gameStatus === false) { 
 
       return (
 
        <EndGame userResultsWins='winnihn' /> 
 
       ) 
 
      } else { 
 
       console.log('returning this not stating') 
 
        return (<DefaultGame startGameUser={(event) => this.startGame(event)}/>) 
 

 
      } 
 

 

 

 

 

 
    } 
 
}//end of App component 
 

 

 

 
ReactDOM.render(<Game/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

import React from 'react'; 
 
import ReactDOM from 'react-dom'; 
 
import {User} from './components/User'; 
 
import {DefaultGame} from './components/DefaultGame'; 
 
import {EndGame} from './components/endGame'; 
 

 
class Game extends React.Component { 
 
    constructor(props) { 
 
     super(props); 
 
     this.state= { 
 
      matchResults:undefined, 
 
      gameStatus:undefined, 
 

 
     };//end if state 
 

 
    }//end of constructor 
 

 
    startGame(event) { 
 
     console.log('the game is starting'); 
 
     this.setState({ 
 
      gameStatus:true 
 
     }) 
 
    } 
 

 
    endGameUser(results) { 
 
     console.log('clicked end Game', results); 
 

 
     this.setState({ 
 
      gameStatus:false, 
 
      matchResults:'hello' 
 
     }); 
 

 
     console.log(this.state); 
 
    } 
 

 
    render() { 
 

 

 

 
      if (this.state.gameStatus === true) { 
 
       console.log('returning this'); 
 

 
        return (<User name={prompt('What is your name')} endGame={this.endGameUser.bind(this)} />) 
 
      } else if (this.state.gameStatus === false) { 
 
       return (
 
        <EndGame userResultsWins='winnihn' /> 
 
       ) 
 
      } else { 
 
       console.log('returning this not stating') 
 
        return (<DefaultGame startGameUser={(event) => this.startGame(event)}/>) 
 

 
      } 
 

 

 

 

 

 
    } 
 
}//end of App component 
 

 

 

 
ReactDOM.render(<Game/>, document.getElementById('app'))

Hallo zu ändern, ich bin neu zu reagieren und ich machte ein einfaches Spiel von Rock Paper Scissors. Ich möchte den Status von matchResults für die Funktion endGameUser ändern. Ich bin in der Lage, den Status von GameStatus in false zu ändern, aber ich kann den Status von matchResults nicht ändern. Gerade jetzt möchte ich es zu hallo ändern, aber schließlich möchte ich es gleich einem Objekt setzen. Kann mir jemand in die richtige Richtung zeigen?

Answer 1

Der Status wird korrekt geändert, das Problem besteht jedoch darin, dass Sie den Status überprüfen, bevor er aktualisiert wurde.

Versuchen Sie, Ihre console.log zum Rückruf zu bewegen.

this.setState({ 
    gameStatus:false, 
    matchResults:'hello' 
},() => console.log(this.state)); 

Answer 2

Sie können setState verwenden. Hier sind die docs! Die Art und Weise, wie Sie momentan setState verwenden, ist zwar korrekt, aber es tut nicht, was Sie gerade tun. setState ist asynchron. So können Sie nicht setState dann direkt danach sehen, dass this.state geändert hat. Reagiere Batches setState Aufrufe bis zu einer bestimmten Zeit. Beim nächsten Aufruf des Renderings sehen Sie, dass sich der Status geändert hat. Verschieben Sie das Konsolenprotokoll zum Rendern, und Sie werden dies sehen.