Availity / availity-reactstrap-validation

Easy to use React validation components compatible for reactstrap.
https://availity.github.io/availity-reactstrap-validation/
MIT License
191 stars 70 forks source link

you're accessing the property `target` on a released/nullified synthetic event. #201

Open SaadMoutalib opened 4 years ago

SaadMoutalib commented 4 years ago

I'm getting this error : you're accessing the property target on a released/nullified synthetic event. when accessing target value in event. what's the probleme?

SaadMoutalib commented 4 years ago

Fixed it by using beforeSubmitValidation this way :

beforeSubmit = (event) => {
    event.persist();
  };

<AvForm onValidSubmit={this.sendEmail} beforeSubmitValidation={this.beforeSubmit}>
nikkhielseath commented 3 years ago

Greetings @SaadMoutalib , I actually experienced the same problem and fixed it the way you did. I just didn't understand the reason behind the problem. I actually had read somewhere that this error occurs if we use React's synthetic event asynchronously like in a setState function. But, in my case, I was just assigning it to a variable like let val = event.target.value. (Which if I am not mistaken is not asynchronous). Maybe, this Av-Component (a Radio group in my case) is calling it in a way that makes it asynchronous?

Could you please, explain the reason?

Regards SNikhill

nikkhielseath commented 3 years ago

I just wanted to share another observation, So, I was logging the values and saw that the value was being logged once but immediately, an undefined was logged in and that error appeared. [Keep in mind that I am using AvRadioGroup.] So, after using event.persist(), I am no longer getting the error but, I can clearly see that the value is being logged twice for the radio option I am clicking. Referencing to this https://github.com/Availity/availity-reactstrap-validation/issues/37#issue-268085652 I think, the second time the event handler was being called with undefined and hence, that led to the said error that is, I was trying to access target property of a (undefined) nullified object.