时间戳

首页 > 解决方案 > React：如何避免多个函数调用

javascript - React：如何避免多个函数调用

问题描述

我正在研究小型反应项目，实际上我在函数调用方面遇到了一些问题。我正在更新 URL 的值，并通过单击按钮调用该方法以显示更新的值，但是每当我首先单击按钮时，它会给我旧值，当我再次单击它时，它会给我更新的值。有人可以帮我如何避免第一次点击时的旧值，我想在第一次点击时显示更新的值，而不是在第二次点击时。我是 ReactJS 的新手，有人可以帮我解决这个问题吗？

完整的组件代码

class Example extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      Item: 5,
      skip: 0
    }

    this.handleClick = this.handleClick.bind(this);
  }

  urlParams() {
    return `http://localhost:3001/meetups?filter[limit]=${(this.state.Item)}&&filter[skip]=${this.state.skip}`
  }

  handleClick() {
    this.setState({skip: this.state.skip + 1})
  }

  render() {
    return (
      <div>
        <a href={this.urlParams()}>Example link</a>
        <pre>{this.urlParams()}</pre>
        <button onClick={this.handleClick}>Change link</button>
      </div>
    )
  }
}


ReactDOM.render(<Example/>, document.querySelector('div#my-example' ))

标签： javascriptarraysreactjsecmascript-6dom-events

解决方案

状态不在调用urlParamsupdating的时间。正如@jolly 告诉您的那样，它是异步函数，因此最好在 a 中使用它，或者您可以简单地将sortedData类型作为参数传递给getSortedType函数，而不是更新状态。此外，ReactJS 社区建议或最佳实践是仅在需要时使用.setStatecallbackstatepropsupdated

以防万一，如果您对 CB 感到不舒服。你可以使用setTimeOut我认为这是一个不好的做法，但它会解决你的问题。你的代码会是这样的：

getSortedData=()=>{
    this.setState({sortedData:'name desc'});
    setTimeout(() => {
      this.getData();
    }, 200);
}

推荐阅读