How to correctly implement onBlur to dispatch API and update props in a component without creating loop on render method?

Question

I am calling API on the onBlur/onChange of input field in Ant.Design(react redux based). on Calling API, It update the props of the component and on update of the props it call render method. in render method it re render the UI and call onBlur/onChange again and it got stuck in endless loop.

I have tried maintaining it in the state, but It is not stopping this recursive behavior.

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

expected result : just fetch the details once actual : repeated calls to onBlur and render method causing stuck in loop.

Try with onChange={this.fetchDetails} instead of onChange={this.fetchDetails()} — Michele
– Michele, Commented Jul 4, 2019 at 12:29

Michele · Accepted Answer · 2019-07-04 12:30:17Z

2

You are passing this.fetchDetails() (call to function) to onChange, while you should pass this.fetchDetails (reference to function) to it.

answered Jul 4, 2019 at 12:30

Michele

8091 gold badge10 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3768904 Over a year ago

Thankyou so much. It is working as expectedly. Can you elaborate the reason, why it was doing so??

Michele Over a year ago

Simply because as render gets triggered it calls fetchDetails (it is a function call, not a function reference), which in turn updates the state triggering a new render.. So that's why you got a loop

Collectives™ on Stack Overflow

How to correctly implement onBlur to dispatch API and update props in a component without creating loop on render method?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related