8000 ReactTransitionGroup - Using with JQuery cause Uncaught TypeError: Cannot read property 'componentDidLeave' of undefined · Issue #5296 · facebook/react · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

ReactTransitionGroup - Using with JQuery cause Uncaught TypeError: Cannot read property 'componentDidLeave' of undefined #5296

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
lovedota opened this issue Oct 27, 2015 · 10 comments
Closed

ReactTransitionGroup - Using with JQuery cause Uncaught TypeError: Cannot read property 'componentDidLeave' of undefined #5296

lovedota opened this issue Oct 27, 2015 · 10 comments

Comments

@lovedota
Copy link

Hi
Please take a look at this https://jsfiddle.net/pvtb9jbt/
After adding some items, please click remove and see the console.log

Uncaught TypeError: Cannot read property 'componentDidLeave' of undefined
React.createClass._handleDoneLeaving @

This is cause from

 _handleDoneLeaving: function (key) {
        var component = this.refs[key];

        if (component.componentDidLeave) { //From this line
          component.componentDidLeave();
        }
}

Can we check

 if (component && component.componentDidLeave) {
    component.componentDidLeave();
 }

Thanks !
@andresgarza
Copy link

I'm not using jQuery but I'm also seeing this errors. Seems that this.refs is empty.

@sophiebits
Copy link
Collaborator

This should have been fixed in 0.14.3.

@lovedota
Copy link
Author

@spicyj
It is not fixed.
Please check http://jsfiddle.net/lovedota/pvtb9jbt/

@jimfb
Copy link
Contributor
jimfb commented Dec 15, 2015

Verified that the user's code is still throwing using 0.14.3

http://jsfiddle.net/fk7dey0u/ (the user's fiddle is using react-dom-0.14.0, not that it matters)

@jimfb jimfb reopened this Dec 15, 2015
@re6exp
Copy link
re6exp commented Jan 21, 2016

Doesn't work using 0.14.6
http://jsfiddle.net/d7pah7dv/

@zpao
Copy link
Member
zpao commented Jan 21, 2016

I think we fixed a different variant of this.

@sophiebits
Copy link
Collaborator

@lovedota @re6exp It looks like you are hitting an e 8000 rror because the done() callback is called three times because you are animating three td elements. If you refactor your code to only call done() once, it will work better.

We should be more resilient to this behavior in ReactTransitionGroup though so that the original code you have also works.

MichaelCereda added a commit to MichaelCereda/react that referenced this issue May 11, 2016
@MichaelCereda
Fixing jQuery, Velocity compatibility
988c32f 
this fixes facebook#5296
@MichaelCereda MichaelCereda mentioned this issue May 11, 2016
Closed
@MichaelCereda
Copy link

I have the same issue with velocity-react (that includes velocity).

changing https://github.com/facebook/react/blob/master/src/addons/transitions/ReactTransitionGroup.js#L185
to

if (component && component.componentDidLeave) {
    component.componentDidLeave();
 }

makes everything go smoothly, i'm going to propose a PR.
#6745

@jimfb jimfb mentioned this issue May 11, 2016
Closed
@matteobelfiore
Copy link

If you are using setInterval or setTimeout inside those methods to fire the callback, it'll be most likely one of those, still running once the Component's instance is already gone (undefined). I just had this issue and got rid of it replacing the intervals and timeouts with an alternative.

@gaearon
Copy link
Collaborator
gaearon commented Jan 27, 2017

I’m going to close since we don’t plan any more changes to TransitionGroup in React repo. Instead, it now is maintained by the community, and you can file an issue in the new repository if this is still affecting you. Thanks!

@gaearon gaearon closed this as completed Jan 27, 2017
@xStrom xStrom mentioned this issue Feb 9, 2017
Closed
@GulberaTekin GulberaTekin mentioned this issue May 9, 2025
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fixing jQuery, Velocity compatibility MichaelCereda/react
9 participants
@sophiebits @zpao @MichaelCereda @andresgarza @lovedota @gaearon @matteobelfiore @re6exp @jimfb
0