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

嗨，我是新手，我做了一个简单的石头剪刀游戏。我想在endGameUser函数上更改matchResults的状态。我能够将gameStatus的状态更改为false，但我无法更改matchResults的状态。现在我想把它改成你好，但最终我想把它设置为一个对象。有人能指出我正确的方向吗？

Answer 1

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

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

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

Answer 2

您可以使用setState。这是docs！您当前使用setState的方式实际上是正确的，但它没有按照您的想法执行。 setState是异步的。因此，在看到this.state已更改之后，您无法立即调用setState。 React批处理setState调用直到某个时间。下次调用渲染时，您将看到状态已更改。将控制台日志移动到渲染，您将看到这一点。

如何更改reactjs中的状态

2 个答案: