Дросселирование реакции / редукса

Question

Я пытаюсь отменить компонент в моем веб-приложении. На самом деле это фильтр для maxPrice, и если пользователь начинает печатать, фильтр начинает работать, и все результаты исчезают, пока за ним не появится разумное число.

Что я пробовал до сих пор:

import _ from 'lodash'

class MaxPrice extends Component {
  onSet = ({ target: { value }}) => {
    if (isNaN(Number(value))) return;

    this.setState({ value }, () => {
        this.props.updateMaxPrice(value.trim());
    });
  };

  render() {
    const updateMaxPrice = _.debounce(e => {
      this.onSet(e);
    }, 1000);

    return (
      <div>
        <ControlLabel>Preis bis</ControlLabel><br />
        <FormControl type="text" className={utilStyles.fullWidth} placeholder="egal"
          onChange={updateMaxPrice} value={this.props.maxPrice}
        />
      </div>
    );
  }
}

Я получаю ошибку

MaxPrice.js:11 Uncaught TypeError: Cannot read property 'value' of null
at MaxPrice._this.onSet (MaxPrice.js:11)
at MaxPrice.js:21
at invokeFunc (lodash.js:10350)
at trailingEdge (lodash.js:10397)
at timerExpired (lodash.js:10385)

В моей старой версии я имел onChange={this.onSet} и это сработало.

Есть идеи, что может быть не так?

Answer 1

Как вы упомянули в комментариях, необходимо использовать event.persist() использовать объект события асинхронно:

https://facebook.github.io/react/docs/events.html

Если вы хотите получить доступ к свойствам события асинхронным способом, вы должны вызвать event.persist() для события, которое удалит синтетическое событие из пула и позволит ссылкам на событие быть сохраненными кодом пользователя.

Это означает такой код, например:

onChange={e => {
  e.persist();
  updateMaxPrice(e);
}}

Answer 2

Вот мое окончательное решение. Спасибо Луночкину!

Мне пришлось ввести вторую избыточную переменную, чтобы пользователь видел значения, которые он вводит. Вторая переменная объявлена ​​так, что WepApp немного ждет обновления.

class MaxPrice extends Component {

  updateMaxPriceRedux = _.debounce((value) => { // this can also dispatch a redux action
      this.props.updateMaxPrice(value);
  }, 500);

  onSet = ({ target: { value }}) => {
    console.log(value);
    if (isNaN(Number(value))) return;
    this.props.updateInternalMaxPrice(value.trim());
    this.updateMaxPriceRedux(value.trim());
  };

    render() {
        return (
            <div>
                <ControlLabel>Preis bis</ControlLabel><br />
                <FormControl type="text" className={utilStyles.fullWidth} placeholder="egal"
                             onChange={e => {
                                 e.persist();
                                 this.onSet(e);
                             }} value={this.props.internalMaxPrice}
                />
            </div>
        );
    }
}

function mapStateToProps(state) {
    return {
        maxPrice: state.maxPrice,
        internalMaxPrice: state.internalMaxPrice
    };
}
function mapDispatchToProps(dispatch) {
    return bindActionCreators({updateMaxPrice:updateMaxPrice,
        updateInternalMaxPrice:updateInternalMaxPrice}, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(MaxPrice);