Извлекать данные из ползунка в onDragEnd, когда состояние изменяется в Reactjs - PullRequest
Новая
       5

Извлекать данные из ползунка в onDragEnd, когда состояние изменяется в Reactjs

0 голосов
/ 08 мая 2019

У меня есть ползунок, который изменяет значения переменной состояния: 

onChange = (event, value) => {
    this.setState({sliderValue: value,});
};

onDragEnd = (event, value) => {
    this.props.fetchData(value);
};


...


<Slider
   value={this.state.sliderValue}
   min={0}
   max={100}
   step={1}
   onChange={(event, value) => this.onChange(event, value)}
   onDragEnd={(event) => this.onDragEnd(event)}
/>

Иногда для установки setState для this.state.sliderValue требуется некоторое время, и this.props.fetchData(значение) * запускается раньше, поэтому выборка данных выполняется со старым значением.

Как я могу убедиться, что последнее значение this.state.sliderValue выбирается?

1 Ответ

1 голос
/ 08 мая 2019

Проблема:

Обновление состояния является асинхронной задачей .Таким образом, вы обновляете sliderValue, когда ползунок меняет свое значение, затем вы устанавливаете для ползунка состояние sliderValue, чтобы обновить его значение, но может случиться так, что состояние не будет обновлено, когда вы перестанете перетаскивать ползунок и вы onDragEndобратный вызов уведомляется со старым значением.

Решение:

В функции onDragEnd просто отметьте, что данные должны быть получены.Значение, необходимое для выполнения fetch, является состоянием, поэтому не требуется значение, возвращаемое ползунком.

Затем вы можете использовать componentDidUpdate для извлечения данных.

codeпример: 

onChange = (event, value) => {
    this.setState({sliderValue: value,});
};


componentDidUpdate(prevPros, prevState) {
  // if data must be fetched and my slider value is updated (prev and current match)
  if (this.state.fetchDataEnabled && prevState.sliderValue === this.state.sliderValue) {
    this.props.fetchData(this.state.sliderValue);
    this.setState({fetchDataEnabled: false});
  }
}


<Slider
   value={this.state.sliderValue}
   min={0}
   max={100}
   step={1}
   onChange={(event, value) => this.onChange(event, value)}
   onDragEnd={() => this.setState({fetchDataEnabled: true})}
/>
...