直到第二次按下按钮后才会更改值

Question

我有一个更改按钮可以增加对象的值。

<Button bsStyle="info" bsSize="lg" onClick={this.addKoala}> 

addKoala：

addKoala: function() { 
    this.setState({ 
    towelCount: this.state.towelCount - 2, 
    koalaCount: this.state.koalaCount + 2 
    }); 
    this.handleClick("Koala"); 
}, 

我有两个值是在同一个进度，所以当你加入一个，你需要从另取。这就是为什么我要离开tokel 2。

它，然后放在这里被推向一个火力后端：

handleClick: function(itemAdded) { 
    var style = null; 
    if (itemAdded === "Towel") { 
    style = "danger" 
    } else { 
    style = "info" 
    } 
    this.props.itemsStore.push({ 
    itemStyle: style, 
    text: "A new " + itemAdded + " was rewarded!", 
    curItemCount: "It's now: " + this.state.towelCount + " to " + this.state.koalaCount, 
    }); 

    var submitJSON = { 
    "koalaCount": this.state.koalaCount, 
    "towelCount": this.state.towelCount 
    }; 
    Actions.patchScores(submitJSON); 
}, 

我刷新网页后，我第一次按下按钮一切正常，但考拉和毛巾的值不会改变。之后，它完成了，但第一次没有奏效。任何帮助将不胜感激！

Answer 1

setState方法有一个可选的第二个参数argumnet，它是在setState被执行和渲染被调用之后执行的回调函数。

void setState(
    function|object nextState, 
    [function callback] 
) 

在你的代码中，handleClick方法假定setState已经被执行并且值得更新。但不能保证这总是正确的。如果您提供handleCLick方法作为callBack setState，则可以确保。

addKoala: function() { 
    this.setState({ 
    towelCount: this.state.towelCount - 2, 
    koalaCount: this.state.koalaCount + 2 
    }, this.handleClick("Koala").bind(this); 
}