reactjs - 如何正确实现 onBlur 以分派(dispatch) API 并更新组件中的 props 而无需在 render 方法上创建循环？

Question

我在 Ant.Design(基于 react redux)中的输入字段的 onBlur/onChange 上调用 API。在调用 API 时，它会更新组件的 Prop ，并在更新 Prop 时调用渲染方法。在 render 方法中，它重新渲染 UI 并再次调用 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 和 render 方法导致卡在循环中。

Answer 1

您正在将 this.fetchDetails()(函数调用)传递给 onChange，而您应该将 this.fetchDetails(函数引用)传递给它。