如何改变状态reactjs

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'))

您好，我是新来的反应，我做了剪刀石头布的一个简单的游戏。我想改变endGameUser函数的matchResults状态。我能够将gameStatus的状态更改为false，但我无法更改matchResults的状态。现在我想把它改成你好，但最终我想把它设置成等于一个对象。任何人都可以将我指向正确的方向吗？

来源

2017-08-25 Champa

状态正在被正确更改，但问题是您正在检查更新之前的状态。

尝试将您的console.log移动到回调。

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

来源

2017-08-25 22:10:48 FuzzyTree

您可以使用setState。这里是docs！你现在使用setState的方式其实是正确的，但它没有做你认为它正在做的事情。 setState是异步的。所以你不能再调用setState，然后看到this.state已经改变。在一定时间内响应批量setState调用。下一次你的渲染被调用时，你会看到状态已经改变。移动控制台日志进行渲染，你会看到这个。

来源

2017-08-25 22:11:36

谢谢你对这个和未来的项目有很大的帮助1 – Champa

如何改变状态reactjs

回答

相关问题