Реагируйте: Как избежать многократного вызова функции - PullRequest
Новая
       8

Реагируйте: Как избежать многократного вызова функции

0 голосов
/ 21 марта 2019

Я работаю над небольшим реактивным проектом, на самом деле у меня есть некоторые проблемы с вызовом функции. Я обновляю значение URL-адреса и вызываю метод с помощью нажатия кнопки, чтобы отобразить обновленные значения, но всякий раз, когда я нажимаю кнопку вначале, она возвращает старые значения при повторном нажатии, а затем обновленные значения. Может кто-нибудь, пожалуйста, помогите мне, как избежать старых значений при первом клике, я хочу показать обновленные значения при первом клике, а не при втором клике. Я новичок в ReactJS. Может кто-нибудь помочь мне решить эту проблему?

Полный код компонента 

<code>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()}
) } } ReactDOM.render (, document.querySelector ('div # my-example'))

Ответы [ 2 ]

1 голос
/ 21 марта 2019

Состояние не updating в то время, когда вызывается urlParams . Как сказал @jolly, setState - это Асинхронная функция, поэтому лучше использовать ее в callback, или вы можете просто передать свой тип sortedData как аргумент в getSortedType функция вместо обновления состояния. Кроме того, сообщество ReactJS предлагает или рекомендуется использовать state, только если необходимо props, чтобы быть updated.

В случае, если вы не чувствуете себя комфортно с CB. Вы можете использовать setTimeOut , что я считаю плохой практикой, но это решит вашу проблему. ваш код будет выглядеть так: 

getSortedData=()=>{
    this.setState({sortedData:'name desc'});
    setTimeout(() => {
      this.getData();
    }, 200);
}
1 голос
/ 21 марта 2019

Там довольно много кода, и нет рабочего примера, поэтому я могу ошибаться, но я думаю, что проблема в getSortedData(): в этой функции вы вызываете setState() и сразу после вызова getData(), который выполнитвыборка, которая использует функцию ulrParams(), которая использует свойство this.state.sortedData.

Проблема в том, что setState() является асинхронным, поэтому не уверен, что, когда urlParams() использует this.state.sortedData,свойство обновлено (на самом деле, мы уверены, что оно не обновлено).

Попробуйте переписать getSortedData() следующим образом: 

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

То, что я здесь делаю, передаю обратный вызовsetState(): при этом getData() будет называться ПОСЛЕ того, как вы обновили состояние.

Что касается вопроса, который вы задали в комментарии, если вы хотите переключить порядок, вы можетедобавьте свойство order в состояние Компонента, присвоив ему значение по умолчанию 'name desc'.
Затем измените getSortedData следующим образом: 

getSortedData =() => {
    let newSort = 'name asc';
    if (this.state.sorteData === newSort) 'name desc';

    this.setState({sortedData: newSort}, () => {
        this.getData();
    })
}
...