如何在reactjs中更改状态
如何在reactjs中更改状态
提问于 2017-08-25 22:00:42
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'))
嗨，我是新来的反应，我做了一个简单的游戏岩石剪刀。我想改变matchResults在endGameUser函数上的状态。我可以将gameStatus的状态更改为false，但不能更改matchResults的状态。现在我想把它更改为hello，但最终我想将它设置为等于一个对象。谁能给我指明正确的方向？
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-08-25 22:10:48
状态更改是正确的，但问题是，在状态更新之前，您正在检查状态。
尝试将您的console.log移动到回调。
this.setState({
gameStatus:false,
matchResults:'hello'
}, () => console.log(this.state));Stack Overflow用户
发布于 2017-08-25 22:11:36
您可以使用setState。这是文档！您目前使用setState的方式实际上是正确的，但它没有执行您认为它正在做的事情。setState是异步的。因此，您不能在看到setState已经更改之后立即调用this.state。响应批setState调用，直到某一时间。下次您的呈现被调用时，您将看到状态发生了变化。将控制台日志移动到呈现，您将看到以下内容。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45889924
复制相关文章
相似问题
腾讯云开发者
