reactjs - react 显示以前的状态

Question

这是我在组件中的代码。

this.state = {
            strength: 0,
            dexterity: 0,
            intelligence: 0,
            health: 0
        };

        this.increaseBasicAttrStrength = this.increaseBasicAttrStrength.bind(this);
        this.updateApp = this.updateApp.bind(this);

    }

    increaseBasicAttrStrength(event) {
        this.setState(prevState => ({
            strength: prevState.strength + 10,
            dexterity: prevState.dexterity,
            intelligence: prevState.intelligence,
            health: prevState.health
        }));
        this.updateApp();
    }

    updateApp() {
        console.log(this.state);
        this.props.basicAttrsHandler(this.state);
    }

即使在 increaseBasicAttrStrength(...) 之后调用了 updateApp(...)，当我控制状态时它显示如下。

{strength: 0, dexterity: 0, intelligence: 0, health: 0}

状态没有更新。

Answer 1

不确定 updateApp 在做什么，但是如果您需要在 setState 调用完成后调用它，您应该将它放在里面回调。 SetState 是异步的，因此无法保证在调用 updateApp 之前已发生这些更新。使用回调可确保在初始状态更新完成之前，内部的任何代码都不会运行:

increaseBasicAttrStrength(event) {
        this.setState(prevState => ({
            strength: prevState.strength + 10,
            dexterity: prevState.dexterity,
            intelligence: prevState.intelligence,
            health: prevState.health
        }), () => this.updateApp())
    }