web-dev-qa-db-fra.com

Le debounce de Lodash ne fonctionne pas dans React

il serait préférable de regarder d'abord mon code:

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>
    )
  }
}

Juste une simple entrée. Dans le constructeur, il saisit value des accessoires (si disponibles) à définit un état local pour le composant.

Ensuite, dans la fonction onChange de la fonction input, je mets à jour l'état, puis j'essaie d'appeler le point de terminaison du service Web pour définir la nouvelle valeur avec Services.setValue().

Ce qui fonctionne, c'est que si je règle le debounce directement par le onChange de l'entrée comme ceci:

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

Mais alors this.setState N'est appelé que toutes les 1000 millisecondes et met à jour la vue. Donc, taper dans un champ de texte finit par paraître bizarre, car ce que vous avez tapé ne s'affiche qu'une seconde plus tard.

Que dois-je faire dans une situation comme celle-ci?

javascriptreactjsecmascript-6lodashdebounce
15
user818700

Le problème se produit car vous n'appelez pas la fonction anti-rebond, vous pouvez procéder de la manière suivante

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>
    )
  }
}
33
Shubham Khatri