Как правильно реализовать onBlur для отправки API и обновления реквизитов в компоненте без создания цикла для метода рендеринга? - PullRequest
Новая
       20

Как правильно реализовать onBlur для отправки API и обновления реквизитов в компоненте без создания цикла для метода рендеринга?

1 голос
/ 04 июля 2019

Я вызываю API на onBlur / onChange поля ввода в Ant.Design (реагировать на основе избыточности). при вызове API обновляет реквизиты компонента, а при обновлении реквизитов вызывает метод render. в методе рендеринга он рендерит пользовательский интерфейс и снова вызывает onBlur / onChange и застревает в бесконечном цикле.

Я пытался поддерживать его в состоянии, но это не останавливает это рекурсивное поведение. 

render () {

const {
      form: { getFieldDecorator, getFieldValue },  payload: { payload },
    } = this.props;

 console.log(" Client details " + JSON.stringify(this.props));

return ( <Form onSubmit={this.handleSubmit} hideRequiredMark style={{ marginTop: 8 }}>
            <FormItem {...formItemLayout} label={<FormattedMessage id="form.seller.code" />}>
              {getFieldDecorator('code', {
                rules: [
                  {
                    required: true,
                    message: formatMessage({ id: 'validation.code.required' }),
                  },
                ],
              })(<Input placeholder={formatMessage({ id: 'form.code.placeholder' })}
              onChange={this.fetchDetails()} 
               />)}
            </FormItem>
</Form>

)

}


 fetchDetails() {
    const { dispatch, form } = this.props;
    const value = this.props.form.getFieldValue('code');

dispatch({
       type: 'form/fetchDetails',
       payload: value,
     });
  }

ожидаемый результат: просто получите данные один раз фактический: повторные вызовы onBlur и метода рендеринга, приводящие к зависанию в цикле.

1 Ответ

1 голос
/ 04 июля 2019

Вы передаете this.fetchDetails() (вызов функции) в onChange, в то время как вы должны передать ей this.fetchDetails (ссылка на функцию).

...