Как правильно использовать debounce with redux-form?

У меня есть вход для поиска.

const { searchMails } = this.props;
searchMails(keyword);

Я добавил lodash debounce на основе этого ответа на переполнение стека.

const { searchMails } = this.props;

const debounceSearchMails = debounce(searchMails, 1000);
debounceSearchMails(keyword);

Действие

export const searchMails = keyword => ({ type: SEARCH_MAILS, payload: keyword });

Однако после добавления debounce, когда я searchMails "hello", он все равно будет запускать 5 раз searchMails через 1 секунду. Полезная нагрузка

h
he
hel
hell
hello

Как я могу правильно использовать debounce? благодаря

ОБНОВЛЕНИЕ 1: добавить полные коды

import React, { PureComponent } from 'react';
import { Field, reduxForm, reset } from 'redux-form';
import { Form } from 'reactstrap';
import debounce from 'lodash/debounce';

class Search extends PureComponent {
 constructor(props) {
 super(props);
 this.onSubmit = this.onSubmit.bind(this);
 }

 onSubmit(values) {
 const { searchMails } = this.props;

 const debounceSearchMails = debounce(searchMails, 1000);
 debounceSearchMails(values.keyword);
 }

 render() {
 const { handleSubmit, keyword } = this.props;

 return (
 <form onsubmit="{handleSubmit(this.onSubmit)}">
 <field name="keyword" component="input" type="search" onchange="{()" ==""> setTimeout(handleSubmit(this.onSubmit))} />
 
 );
 }
}

function validate(values) {
 const errors = {};
 return errors;
}

export default reduxForm({
 validate,
 form: 'searchForm'
})(Search);
</field></form>

ОБНОВЛЕНИЕ 2:

Я изменил свое действие на

const searchMails0 = keyword => ({ type: SEARCH_MAILS, payload: keyword });
export const searchMails = debounce(searchMails0, 1000);

Но все равно.

ОБНОВЛЕНИЕ 3: на этот раз я изменил это, но все равно.

class Search extends PureComponent {
 constructor(props) {
 super(props);
 this.onSubmit = this.onSubmit.bind(this);
 this.debouncedSubmit = debounce(this.onSubmit, 1000);
 }

 onSubmit(values) {
 const { searchMails } = this.props;
 searchMails(values.keyword);
 }

 render() {
 const { handleSubmit, keyword } = this.props;
 return (
 <form onsubmit="{handleSubmit(this.debouncedSubmit)}">
 <field name="keyword" component="input" type="search" onchange="{()" ==""> setTimeout(handleSubmit(this.debouncedSubmit))} />
 
 );
 }
}
</field></form>

UDPATE 4:

Я обнаружил, что проблема связана с setTimeout, если у меня это, как debounce ниже, debounce не будет работать. Если я удалю setTimeout, debounce будет работать. Но тогда onChange всегда будет возвращать последнее значение. Так что мне нужно иметь это из-за redux-формы этого "вопроса",

<field component="input" type="search" onchange="{()" ==""> setTimeout(handleSubmit(debounce(this.onSubmit, 1000)))}/>
</field>
1 ответ

Первое большое спасибо за @zerkms. Без его проводника в правильном направлении я не могу этого сделать.

Вы должны только разблокировать функцию деблокирования, а затем использовать ее. Это функция деблокирования, которая содержит внутреннее состояние, необходимое для дедуализации. На данный момент вы воссоздаете его при каждом нажатии клавиши. - zerkms

После проверки типаChange это окончательный рабочий код:

class Search extends PureComponent {
 constructor(props) {
 super(props);

 this.onSubmit = this.onSubmit.bind(this);
 this.onChange = this.onChange.bind(this);
 this.debouncedOnChange = debounce(this.onChange, 1000);
 }

 onSubmit(values) {
 const { searchMails } = this.props;
 searchMails(values.keyword);
 }

 onChange(event, newValue, previousValue) {
 const { searchMails } = this.props;
 searchMails(newValue); // the second parameter is new value
 }

 render() {
 const { keyword } = this.props;
 return (
 <form onsubmit="{handleSubmit(this.onSubmit)}">
 <field component="input" type="search" onchange="{this.debouncedOnChange}/">
 
 );
 }
}
</field></form>

Уроки выучены:

  • Я никогда не думал, что смогу сделать что-то вроде this.debouncedSubmit = debounce(this.onSubmit, 1000); в конструкторе.

  • И я всегда думал, что мне нужно использовать handleSubmit из handleSubmit -формы, но получается, что это не для всех случаев.

  • Нужно идти глубоко.

licensed under cc by-sa 3.0 with attribution.