在 ANTD 文本区域中键入 1 个字符后，无法键入第二页挂起

问：

我在 react 项目中使用 ANTD lib 并在一个文本区域的弹出窗口中显示小表单，起初如果我们打开弹出窗口，它可以正常工作，但是当我关闭它并重新打开它时，表单内的文本区域，不允许编辑超过 1 个字符。

并抛出以下错误：

> getRules @ createBaseForm.js:257
> (anonymous) @ createBaseForm.js:397
> validateFieldsInternal @ createBaseForm.js:384
> onCollectValidate @ createBaseForm.js:142
> resolveOnChange @ Input.js:62
> TextArea.\_this.handleChange @ TextArea.js:57
> callCallback @ react-dom.development.js:188
> invokeGuardedCallbackDev @ react-dom.development.js:237
> invokeGuardedCallback @ react-dom.development.js:292
> invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:306
> executeDispatch @ react-dom.development.js:389
> executeDispatchesInOrder @ react-dom.development.js:414
> executeDispatchesAndRelease @ react-dom.development.js:3278
> executeDispatchesAndReleaseTopLevel @ react-dom.development.js:3287
> forEachAccumulated @ react-dom.development.js:3257
> runEventsInBatch @ react-dom.development.js:3304
> runExtractedPluginEventsInBatch @ react-dom.development.js:3514
> handleTopLevel @ react-dom.development.js:3558
> batchedEventUpdates$1 @ react-dom.development.js:21871
> batchedEventUpdates @ react-dom.development.js:795
> dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:3568
> attemptToDispatchEvent @ react-dom.development.js:4267
> dispatchEvent @ react-dom.development.js:4189
> unstable_runWithPriority @ scheduler.development.js:653
> runWithPriority$1 @ react-dom.development.js:11039
> discreteUpdates$1 @ react-dom.development.js:21887
> discreteUpdates @ react-dom.development.js:806
> dispatchDiscreteEvent @ react-dom.development.js:4168
> createBaseForm.js:257 Uncaught TypeError: Cannot read properties of undefined (reading 'filter')
> at ReactClassComponent.getRules (createBaseForm.js:257:1)
> at createBaseForm.js:397:1
> at Array.forEach (\<anonymous\>)
> at ReactClassComponent.validateFieldsInternal (createBaseForm.js:384:1)
> at ReactClassComponent.onCollectValidate (createBaseForm.js:142:1)
> at resolveOnChange (Input.js:62:1)
> at TextArea.\_this.handleChange (TextArea.js:57:1)
> at HTMLUnknownElement.callCallback (react-dom.development.js:188:1)
> at Object.invokeGuardedCallbackDev (react-dom.development.js:237:1)
> at invokeGuardedCallback (react-dom.development.js:292:1)
> at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:306:1)
> at executeDispatch (react-dom.development.js:389:1)
> at executeDispatchesInOrder (react-dom.development.js:414:1)
> at executeDispatchesAndRelease (react-dom.development.js:3278:1)
> at executeDispatchesAndReleaseTopLevel (react-dom.development.js:3287:1)
> at Array.forEach (\<anonymous\>)
> at forEachAccumulated (react-dom.development.js:3257:1)
> at runEventsInBatch (react-dom.development.js:3304:1)
> at runExtractedPluginEventsInBatch (react-dom.development.js:3514:1)
> at handleTopLevel (react-dom.development.js:3558:1)
> at batchedEventUpdates$1 (react-dom.development.js:21871:1)
> at batchedEventUpdates (react-dom.development.js:795:1)
> at dispatchEventForLegacyPluginEventSystem (react-dom.development.js:3568:1)
> at attemptToDispatchEvent (react-dom.development.js:4267:1)
> at dispatchEvent (react-dom.development.js:4189:1)
> at unstable_runWithPriority (scheduler.development.js:653:1)
> at runWithPriority$1 (react-dom.development.js:11039:1)
> at discreteUpdates$1 (react-dom.development.js:21887:1)
> at discreteUpdates (react-dom.development.js:806:1)
> at dispatchDiscreteEvent (react-dom.development.js:4168:1)

openAddressModal = addressType =\> {
this.setState({ showAddressModal: true, addressType: addressType });
};

closeAddressModal = () =\> {
this.setState({showAddressModal: false,});
};

submitAddressModal = () =\> {
if (this.state.checkedBox) {
this.setState({customer_billing_address:this.state.modal_data.billing_address,customer_billing_city: this.state.modal_data.billing_city,customer_billing_state: this.state.modal_data.billing_state,customer_billing_pin: this.state.modal_data.billing_pin,customer_shipping_address: this.state.modal_data.billing_address,customer_shipping_city: this.state.modal_data.billing_city,customer_shipping_state: this.state.modal_data.billing_state,customer_shipping_pin: this.state.modal_data.billing_pin,customer_billing_address_show: this.state.modal_data.billing_address,customer_shipping_address_show: this.state.modal_data.billing_address,});}

if (this.state.modal_data.type == 'billing') {this.setState({customer_billing_address: this.state.modal_data.billing_address,customer_billing_city: this.state.modal_data.billing_city,customer_billing_state: this.state.modal_data.billing_state,customer_billing_pin: this.state.modal_data.billing_pin,customer_billing_address_show: this.state.modal_data.billing_address,},() =\> {let auto_billing_address = ${this.state.customer_billing_address}${this.state.customer_billing_city ? ', ' : ''             }${this.state.customer_billing_city}${this.state.customer_billing_state ? ', ' : ''}${this.state.customer_billing_state             }${this.state.customer_billing_pin ? ', ' : ''}${this.state.customer_billing_pin             };this.setState({auto_billing_address: auto_billing_address,});
this.props.form.setFieldsValue({
customer_billing_address: auto_billing_address,
});
},
);
}
if (this.state.modal_data.type == 'shipping') {
this.setState(
{
customer_shipping_address: this.state.modal_data.shipping_address,
customer_shipping_city: this.state.modal_data.shipping_city,
customer_shipping_state: this.state.modal_data.shipping_state,
customer_shipping_pin: this.state.modal_data.shipping_pin,
customer_shipping_address_show: this.state.modal_data.shipping_address,
},
() =\> {
let auto_shipping_address = `${this.state.customer_shipping_address}${this.state.customer_shipping_city ? ', ' : ''         }${this.state.customer_shipping_city}${this.state.customer_shipping_state ? ', ' : ''}${this.state.customer_shipping_state         }${this.state.customer_shipping_pin ? ', ' : ''}${this.state.customer_shipping_pin         }`;
this.setState({
auto_shipping_address: auto_shipping_address,
});
this.props.form.setFieldsValue({
customer_shipping_address: auto_shipping_address,
});
},
);
}
this.setState({
showAddressModal: false,
});
};

    <AddressPopup
      type={this.state.addressType}
      state={this.state}
      setState={this.setState.bind(this)}
      props={this.props}
      submitAddressModal={this.submitAddressModal}
      closeAddressModal={this.closeAddressModal}
    />

**child form in popup**

onSubmit = e =\> {e.preventDefault();e.stopPropagation();const { form, submitAddressModal } = this.props;form.validateFields(\[this.address_field_name,this.city_field_name,this.pincode_field_name,this.state_field_name,\]).then((values, errs) =\> {if (!errs) {let data = {\[${this.props.type}\_address\]: this.props.form.getFieldValue(${this.address_field_name}),\[${this.props.type}\_pin\]: this.props.form.getFieldValue(${this.pincode_field_name}),\[${this.props.type}\_city\]: this.props.form.getFieldValue(${this.city_field_name}),\[${this.props.type}\_state\]: this.props.form.getFieldValue(${this.state_field_name}),\['type'\]: ${this.props.type},};this.props.setState({ modal_data: data }, () =\> {submitAddressModal();});}});};

**parent form text area**

    <label
      htmlFor="customer_billing_address"
      className="ant-form-item-required font-weight-bold mb-1"
      id="customer_billing_address"
    >
      Billing Address
    </label>
    <Form.Item>
      {form.getFieldDecorator('customer_billing_address', {
        initialValue: this.state.customer_billing_address,
        rules: [
          {
            required: true,
            message: 'Please enter address',
          },
        ],
      })(
        <Input.TextArea
          onBlur={this.checked}
          rows={2}
          name="customer_billing_address"
          placeholder="Address"
          onChange={this.onChange}
          maxLength={255}
          value={this.state.auto_billing_address}
          onClick={() => this.openAddressModal('billing')}
          readOnly={true}
        />,
      )}
    </Form.Item>

我尝试通过记录道具和状态来调试它，一切似乎都很好。不要从它抛出问题的地方。