{"action":"created","issue":{"url":"https://api.github.com/repos/brigand/react-mixin/issues/2","labels_url":"https://api.github.com/repos/brigand/react-mixin/issues/2/labels{/name}","comments_url":"https://api.github.com/repos/brigand/react-mixin/issues/2/comments","events_url":"https://api.github.com/repos/brigand/react-mixin/issues/2/events","html_url":"https://github.com/brigand/react-mixin/issues/2","id":57030762,"number":2,"title":"Not work with re-mounted components","user":{"login":"rottmann","id":381201,"avatar_url":"https://avatars.githubusercontent.com/u/381201?v=3","gravatar_id":"","url":"https://api.github.com/users/rottmann","html_url":"https://github.com/rottmann","followers_url":"https://api.github.com/users/rottmann/followers","following_url":"https://api.github.com/users/rottmann/following{/other_user}","gists_url":"https://api.github.com/users/rottmann/gists{/gist_id}","starred_url":"https://api.github.com/users/rottmann/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rottmann/subscriptions","organizations_url":"https://api.github.com/users/rottmann/orgs","repos_url":"https://api.github.com/users/rottmann/repos","events_url":"https://api.github.com/users/rottmann/events{/privacy}","received_events_url":"https://api.github.com/users/rottmann/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2015-02-09T13:33:31Z","updated_at":"2015-02-09T14:50:36Z","closed_at":"2015-02-09T14:47:59Z","body":"I output a list of projects with an \"add\" project button.\r\n\r\nWrite a small example without router, other components, store or actions (they do not much in the example).\r\n\r\nOne problem is, that i have to add `bind(this)` on the listener in the projectsStateMixin, but i cant see a reason for that.\r\n\r\nThe bigger Problem:\r\nOn the first view everything work, you can click \"add\" Button to add projects.\r\nBut when you route to another component, so that the navigation component will unmount, and you mount it back and push \"add\" projects i got an error:\r\n`invariant.js?96aa:42 Uncaught Error: Invariant Violation: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted componen`\r\n\r\n\r\nConsole log:\r\n* mount to another component (a click on the menu to an other part of the app):\r\n```js\r\nProjectsStateMixin.componentWillUnmount\r\n```\r\n\r\n* mount ProjectsNavigation again (the view looks fine)\r\n```js\r\nProjectsNavigation.getInitialState\r\nProjectsStateMixin.getState\r\nProjectsStateMixin.componentWillMount\r\nProjectsNavigation.render\r\n```\r\n\r\n* click add Project\r\n```js\r\nProjectsNavigation.onClick\r\nProjectsStore.addProjects\r\nProjectsStateMixin.onChange\r\nProjectsNavigation {props: Object, context: Object, state: Object, refs: Object, _reactInternalInstance: undefined…}\r\nProjectsNavigation.getInitialState\r\nProjectsStateMixin.getState\r\ninvariant.js?96aa:42 Uncaught Error: Invariant Violation: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component.\r\n```\r\n\r\n\r\nProjectsNavigation Component:\r\n```\r\nclass ProjectsNavigation extends React.Component {\r\n    constructor (props) {\r\n        super(props);\r\n        this.state = this.getInitialState();\r\n    }\r\n\r\n    getInitialState () {\r\nconsole.log('ProjectsNavigation.getInitialState');\r\n        return {\r\n            projects: projectsStateMixin.getState()\r\n        }\r\n    }\r\n\r\n    render () {\r\nconsole.log('ProjectsNavigation.render');\r\n        var items = this.state.projects.map(function (item) {\r\n            return (\r\n                <li key={item.id}>\r\n                    id: {item.id}, name: {item.name}\r\n                </li>\r\n            );\r\n        });\r\n\r\n        return (\r\n            <div className=\"project-navigation\">\r\n                <p>Projects:</p>\r\n                <ul>{items}</ul>\r\n                <button onClick={this.onClick}>add</button>\r\n            </div>\r\n        );\r\n    }\r\n\r\n    onClick () {\r\nconsole.log('ProjectsNavigation.onClick');\r\n        projectActionCreators.addProjects([ { name: 'some project' } ]); // dispatch to store, which add to state\r\n    }\r\n}\r\n\r\nreactMixin(ProjectsNavigation.prototype, projectsStateMixin);\r\n```\r\n\r\nProjectsStateMixin:\r\n```\r\nvar ProjectsStateMixin = {\r\n    getState () {\r\nconsole.log('ProjectsStateMixin.getState');\r\n        return projectsStore.getState().projects;\r\n    },\r\n\r\n    componentWillMount () {\r\nconsole.log('ProjectsStateMixin.componentWillMount');\r\n        projectsStore.listen(this.onChange.bind(this)); // BIND ?\r\n    },\r\n\r\n    componentWillUnmount () {\r\nconsole.log('ProjectsStateMixin.componentWillUnmount');\r\n        projectsStore.unlisten(this.onChange.bind(this)); // BIND ?\r\n    },\r\n\r\n    onChange () {\r\nconsole.log('ProjectsStateMixin.onChange');\r\nconsole.log(this);\r\n        //\r\n        // Here is the problem\r\n        //\r\n        this.setState(this.getInitialState());\r\n    }\r\n}\r\nexport default ProjectsStateMixin;\r\n```\r\n"},"comment":{"url":"https://api.github.com/repos/brigand/react-mixin/issues/comments/73520464","html_url":"https://github.com/brigand/react-mixin/issues/2#issuecomment-73520464","issue_url":"https://api.github.com/repos/brigand/react-mixin/issues/2","id":73520464,"user":{"login":"rottmann","id":381201,"avatar_url":"https://avatars.githubusercontent.com/u/381201?v=3","gravatar_id":"","url":"https://api.github.com/users/rottmann","html_url":"https://github.com/rottmann","followers_url":"https://api.github.com/users/rottmann/followers","following_url":"https://api.github.com/users/rottmann/following{/other_user}","gists_url":"https://api.github.com/users/rottmann/gists{/gist_id}","starred_url":"https://api.github.com/users/rottmann/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rottmann/subscriptions","organizations_url":"https://api.github.com/users/rottmann/orgs","repos_url":"https://api.github.com/users/rottmann/repos","events_url":"https://api.github.com/users/rottmann/events{/privacy}","received_events_url":"https://api.github.com/users/rottmann/received_events","type":"User","site_admin":false},"created_at":"2015-02-09T14:50:36Z","updated_at":"2015-02-09T14:50:36Z","body":"Thank you!"}}