Question

以下是我在React组件中的代码摘要：

getInitialState: function(){
  return{link:""}
},
onClick1: function(){
   this.setState({link:"Link1"});
   this.otherFunction();
},
onClick2: function(){
   this.setState({link:"Link2"});
   this.otherFunction();
},
otherFunction:function(){
     //API call to this.state.link
},
render: function(){
  return <div>
  <button1 onClick={this.onClick1}>Link1</button>
  <button2 onClick={this.onClick2}>Link2</button>
  //...some code to display the results of API call
  </div>
  }

我遇到的问题是，第一次单击按钮时，otherFunction将运行，但它不会具有myState的更新值。如果我再次点击，那么它可以正常工作。

Answer 1

来自docs：

setState()不会立即改变this.state，但会创建待处理状态转换。在调用此方法后访问this.state可能会返回现有值。

无法保证对setState的调用进行同步操作，并且可以对调用进行批处理以获得性能提升。

如果要在状态转换完成后执行函数，请将其作为回调传递：

onClick1: function() {
   this.setState({link:"Link1"}, this.otherFunction);
},

Answer 2

好吧，我在这里回答我自己的问题，以供将来参考。我想到了。我从onClick函数中删除了this.otherFunction（），并将其放在componentWillUpdate中。所以它看起来像这样：

getInitialState: function(){
  return{link:""}
},
onClick1: function(){
   this.setState({link:"Link1"});
},
onClick2: function(){
   this.setState({link:"Link2"});
},
otherFunction:function(){
     //API call to this.state.link
},
componentWillUpdate(){
    this.otherFunction();
},
render: function(){
  return <div>
  <button1 onClick={this.onClick1}>Link1</button>
  <button2 onClick={this.onClick2}>Link2</button>
  //...some code to display the results of API call
  </div>
  }

Answer 3

如果所有onClick都改变了状态，那么你不应该有两个执行相同工作的函数。您应该将“link”状态的新值作为参数传递给函数“onClick”：）

ReactJS - 需要单击两次以设置状态和运行功能

3 个答案: