Question

我正在做一个小型的反应项目，实际上我对函数调用有一些问题。我正在更新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' ))

Answer 1

有很多代码没有可用的示例，所以我可能是错的，但是我认为问题出在getSortedData()中：在该函数中，您调用setState()，然后调用{{ 1}}将执行使用getData()函数并使用属性ulrParams()的提取。

问题是this.state.sortedData是异步的，因此不确定setState()使用urlParams()时属性是否已更新（实际上，我们确定它没有更新）

尝试如下重写this.state.sortedData：

getSortedData()

我在这里所做的是将回调传递给getSortedData =() => { this.setState({sortedData:'name desc'}, () => { this.getData(); }) }：这样，在更新状态后，setState()将被称为。

关于您在注释中提出的问题，如果要切换顺序，可以在组件状态下添加属性getData()，并为其指定默认值order。 br /> 然后，您按以下方式更改'name desc'：

getSortedData

Answer 2

调用 urlParams 时，

状态不是updating。正如@jolly告诉您的那样，setState是 Asynch 函数，因此最好在callback中使用它，或者您可以像下面这样简单地传递 sortedData 类型 getSortedType 函数中的参数，而不是更新状态。另外，ReactJS社区建议或最佳实践是仅在需要state为props时才使用updated。

以防万一，如果您对CB不满意。您可以使用 setTimeOut ，我认为这是一个不好的做法，但可以解决您的问题。您的代码如下：

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

React：如何避免多功能调用

2 个答案: