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

IT技术 reactjs
2021-05-02 09:53:41

这是我在 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 的更新值。如果我再次单击，则它可以正常工作。

3个回答

从文档：

setState()不会立即变异，this.state而是创建一个挂起的状态转换。this.state调用此方法后访问可能会返回现有值。

无法保证调用的同步操作，setState并且可能会批处理调用以提高性能。

如果您希望在状态转换完成后执行某个函数，请将其作为回调传入：

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

好吧，我在这里回答我自己的问题，以供将来参考。我想到了。我从 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>
  }

如果 onClick 所做的只是改变状态，那么你不应该有两个做同样工作的函数。您应该将“链接”状态的新值作为参数传递给函数“onClick”:)

其它你可能感兴趣的问题
上一篇Z电机在自动归位期间不移动 下一篇我可以在本地使用 OctoPi 吗？