如何改變狀態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

回答

相關問題