在按下第二个按钮

时间:2016-03-01 22:53:21

标签: javascript reactjs firebase reactfire

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

<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");
},

我有两个在同一个ProgressBar中的值,所以当你添加到一个时,你需要从另一个中获取。这就是为什么我要从托克尔那里拿走2分。

然后它会被推送到firebase后端:

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);
},

刷新网站后,第一次按下按钮一切正常,但考拉和毛巾的值不会改变。之后,它已完成,但第一次无效。任何帮助将不胜感激!

1 个答案:

答案 0 :(得分:0)

setState方法有一个可选的第二个argumnet,它是一个在执行setState并调用render之后执行的回调函数。

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

在您的代码中,handleClick方法假定已执行setState并更新了valaues。但不能保证这一切都是真的。如果您将handleCLick方法作为callBack提供给setState,则可以确保这一点。

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