Lodash debounce не работает в React

было бы лучше сначала посмотрите на мой код: 

import React, { Component } from 'react';
import _ from 'lodash';
import Services from 'Services'; // Webservice calls

export default class componentName extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: this.props.value || null
    }
  }

  onChange(value) {
    this.setState({ value });

    // This doesn't call Services.setValue at all
    _.debounce(() => Services.setValue(value), 1000);
  }

  render() {
    return (
      <div>
        <input 
          onChange={(event, value) => this.onChange(value)}
          value={this.state.value}
        />
      </div>
    )
  }
}

просто простой вход. В контрукторе он захватывает value из реквизита (если доступно) в устанавливает локальное состояние для компонента.

затем в на input Я обновляю состояние, а затем пытаюсь вызвать конечную точку webservice, чтобы установить новое значение с Services.setValue().

что работает, если я установил debounce непосредственно onChange входной как Итак:

<input 
  value={this.state.value} 
  onChange={_.debounce((event, value) => this.onChange(value), 1000)} 
/>

а то this.setState вызывается только каждые 1000 миллисекунд и обновляет представление. Поэтому ввод текста в текстовое поле выглядит странно, так как то, что вы набрали, отображается только через секунду.

что мне делать в такой ситуации?

10
debounce ecmascript-6 javascript lodash reactjs

1 ответов

проблема возникает, потому что вы не вызываете функцию debounce, вы можете сделать следующим образом

export default class componentName extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: this.props.value || null
    }
    this.servicesValue = _.debounce(this.servicesValue, 1000);
  }

  onChange(value) {
    this.setState({ value });
    this.servicesValue(value);
  }
  servicesValue = (value) => {
      Services.setValue(value)
  }
  render() {
    return (
      <div>
        <input 
          onChange={(event, value) => this.onChange(value)}
          value={this.state.value}
        />
      </div>
    )
  }
}
17