The issue I'm having isn't one that needs fixing so to speak more so I'm curious as to why this functionality changes. This code is in Typescript and I'm using Mobx as well.
I have a state called GlobalPageState with a property selectedTab and a function to set this property called setSelectedTab
export default GlobalPageState extends State {
#observable
public selectedTab = string;
#action
public setSelectedTab(selectedTab: PageTab) {
this.selectedTab = selectedTab;
}
}
in my react component, I've destructured these properties and referenced them as such:
const { selectedTab, setSelectedTab } = GlobalPageState
const onTabSelect = (newTab: string) => {
setSelectedTab(newTab)
}
This gives me the error that I can't set the properties of undefined. However, this works:
const { selectedTab } = GlobalPageState
const onTabSelect = (newTab: string) => {
GlobalPageState.setSelectedTab(newTab)
}
Why would this be the case, assuming everything else remains the same? Does destructuring the function call in this case somehow change its functionality i.e. referencing? Not shown are a lot of other functions and properties on GlobalPageState that is being used, and those all work fine when destructured in this way so I'm unsure why this call would be different. Thanks!
Basically you just need to read how this works in Javascript https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this
tl;dr: your function is losing context when you assign it to the variable and then call without dot, like class.method()
Regarding to MobX you can also use #action.bound although I would recommend sticking to arrow functions because it is more "native" JS way of doing thing. Also it is usually better to define all public class methods (actions) as arrow functions, that way you don't need to worry if you destructure them or not, you can call them either way.
I have seen the following code:
class Welcome extends React.Component {
constructor(props) {
super(props);
this.state = {
name: ''
}
}
set name(newValue: string) {
this.setState({ name: newValue });
}
get name(): string {
return this.state.name
}
}
The setter function puzzles me. Could anyone tell me when the setter function is called? Will it be called by this.setState({ name: ...? If so, will it be infinite?
Similarly for the getter function. Will it be an infinite call?
Could anyone tell me when the setter function is called?
This is called when attempting to set value to this.name. This is a javascript feature and not related to React.
React ignores all changes to state except when done via setState. Changing name using this.name = 'newName' isn't normally a valid method of modifying state. All state changes will HAVE to occur via setState. In this code, a custom setter method is defined so that this.name = 'newName' calls this.setState.
There is no conflict in this case. Calling setter method during assignment is javascript feature, React plays no role in it. The setter method modifies the state using setState which then notifies react of the change.
The getter function is called every time you try to access this.name. Since the getter function returns this.state.name, it is as-if this.name expands to this.state.name.
I've been into a several React projects now, and I've notice in one project that every new method is not binded. What is the actual difference (if there's any)? Why bind if you could do it like the second example?
In the first case, the code has looked like this:
constructor(props) {
super(props);
this.state = { myState: false };
this.clickMe = this.clickMe.bind(this);
}
clickMe() {
this.setState({ myState: !this.state.myState });
}
The other example looks like this:
constructor(props) {
super(props);
this.state = { myState: false };
}
clickMe = () => {
this.setState({
myState: !this.state.myState
});
}
In constructure,
this.clickMe = this.clickMe.bind(this);
Using bind method you do explicit this binding to provide context to clickMe method.
ie. React Component Scope here
In short,you taking care to decide what is the invoking context scope (this binding).
But with
clickMe = () => {
this.setState({
myState: !this.state.myState
});
}
Arrow function take care for you do lexical scope binding of the React Component scope within which it is define.No need to use bind
If you dont use arrow function,without bind,your function will not get binded to React Component scope.
Arrow functions are great because they are faster and easier to write. In a small or medium size app there's not a tangible difference. You can use the arrow functions if you prefer and avoid the binding inside the constructor.
However, someone has decided to look at performance and side effects. So you can check these 2 links:
When Should I User Arrow Functions?
Arrow Functions in Class Properties Might Not Be As Great As We Think
I was trying to pass props from parent to child component.
While I was calling this.props inside render its working fine But when I am calling it inside function which will not render (help me do calculation) the console value is "undefined".
Please answer this question with explanation?
Is the function member of the class? In other words, has the function been bind to the class?
Value will be undefined if the function doesn't know what class it belong to. Bind it to a class, then you'll get your value.
For instance -
An unbinded function will look like this
abc() {
console.log(this); //this will be undefined here
}
A binded function will look like this
constructor() {
this.abc = this.abc.bind(this);
}
abc() {
console.log(this); //this will have a value
}
In case, you want to skip writing bind you can follow the new syntax
abc = () => {
console.log(this); //this will have a value
}
Finally, you'll be calling your function like this.abc()
Please bind the function to the class either in the constructor or using .bind
I am coding a simple app on reactjs-flux and everything works fine except I am receiving a warning from reactjs telling me that I am calling setState on unmounted components.
I have figured out this is because changelisteners to which components are hooked are not being removed from the store on componentWillUnmount. I know it because when I print the list of listeners from Eventemitter I see the listener which was supposed to be destroyed still there, and the list grows larger as I mount/unmount the same component several times.
I paste code from my BaseStore:
import Constants from '../core/Constants';
import {EventEmitter} from 'events';
class BaseStore extends EventEmitter {
// Allow Controller-View to register itself with store
addChangeListener(callback) {
this.on(Constants.CHANGE_EVENT, callback);
}
removeChangeListener(callback) {
this.removeListener(Constants.CHANGE_EVENT, callback);
}
// triggers change listener above, firing controller-view callback
emitChange() {
this.emit(Constants.CHANGE_EVENT);
}
}
export default BaseStore;
I paste the relevant code from a component experiencing this bug (it happens with all components, though):
#AuthenticatedComponent
class ProductsPage extends React.Component {
static propTypes = {
accessToken: PropTypes.string
};
constructor() {
super();
this._productBatch;
this._productBatchesNum;
this._activeProductBatch;
this._productBlacklist;
this._searchById;
this._searchingById;
this.state = this._getStateFromStore();
}
componentDidMount() {
ProductsStore.addChangeListener(this._onChange.bind(this));
}
componentWillUnmount() {
ProductsStore.removeChangeListener(this._onChange.bind(this));
}
_onChange() {
this.setState(this._getStateFromStore());
}
}
This is driving me pretty nuts at this point. Any ideas?
Thank you!
Short version: expect(f.bind(this)).not.toBe(f.bind(this));
Longer explanation:
The cause of the issue is that EventEmitter.removeListener requires that you pass a function you have previously registered with EventEmitter.addListener. If you pass a reference to any other function, it is a silent no-op.
In your code, you are passing this._onChange.bind(this) to addListener. bind returns a new function that is bound to this. You are then discarding the reference to that bound function. Then you try to remove another new function created by a bind call, and it's a no op, since that was never added.
React.createClass auto-binds methods. In ES6, you need to manually bind in your constructor:
#AuthenticatedComponent
class ProductsPage extends React.Component {
static propTypes = {
accessToken: PropTypes.string
};
constructor() {
super();
this._productBatch;
this._productBatchesNum;
this._activeProductBatch;
this._productBlacklist;
this._searchById;
this._searchingById;
this.state = this._getStateFromStore();
// Bind listeners (you can write an autoBind(this);
this._onChange = this._onChange.bind(this);
}
componentDidMount() {
// listener pre-bound into a fixed function reference. Add it
ProductsStore.addChangeListener(this._onChange);
}
componentWillUnmount() {
// Remove same function reference that was added
ProductsStore.removeChangeListener(this._onChange);
}
_onChange() {
this.setState(this._getStateFromStore());
}
There are various ways of simplifying binding - you could use an ES7 #autobind method decorator (e.g. autobind-decorator on npm), or write an autoBind function that you call in the constructor with autoBind(this);.
In ES7, you will (hopefully) be able to use class properties for a more convenient syntax. You can enable this in Babel if you like as part of the stage-1 proposal http://babeljs.io/docs/plugins/transform-class-properties/ . Then, you just declare your event listener methods as class properties rather than methods:
_onChange = () => {
this.setState(this._getStateFromStore());
}
Because the initializer for _onChange is invoked in the context of the constructor, the arrow function auto-binds this to the class instance so you can just pass this._onChange as an event handler without needing to manually bind it.
So I have found the solution, it turns out I only had to assign this._onChange.bind(this) to an internal property before passing it as an argument to removechangelistener and addchangelistener. Here is the solution:
componentDidMount() {
this.changeListener = this._onChange.bind(this);
ProductsStore.addChangeListener(this.changeListener);
this._showProducts();
}
componentWillUnmount() {
ProductsStore.removeChangeListener(this.changeListener);
}
I do not know, however, why this solves the issue. Any ideas?
Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the exports component.
I am using the exact same implementation across multiple react components. i.e. this is repeated across several .jsx components.
componentDidMount: function() {
console.log('DidMount- Component 1');
ViewStateStore.addChangeListener(this._onChange);
},
componentWillUnmount: function() {
console.log('DidUnMount- Component 1');
ViewStateStore.removeChangeListener(this._onChange);
},
_onChange:function()
{
console.log('SetState- Component 1');
this.setState(getStateFromStores());
},
Possible Solution
Currently the following is working out for me, but it has been a little temperamental. Wrap the call back in a function/named-function.
ViewStateStore.addChangeListener(function (){this._onChange});
one might also try
ViewStateStore.addChangeListener(function named(){this._onChange});
Theory
EventEmitter is for some reason getting confused identifying the callback to remove. Using a named function is perhaps helping with that.
Try removing the .bind(this) from your addChangeListener and removeChangeListener. They are already bound to your component when they get called.
I decided it so
class Tooltip extends React.Component {
constructor (props) {
super(props);
this.state = {
handleOutsideClick: this.handleOutsideClick.bind(this)
};
}
componentDidMount () {
window.addEventListener('click', this.state.handleOutsideClick);
}
componentWillUnmount () {
window.removeEventListener('click', this.state.handleOutsideClick);
}
}
This is a es6 problem. React.createClass binds 'this' properly for all function defined inside its scope.
For es6, you have to do something yourself to bind the right 'this'. Calling bind(this) however, creates a new function each time, and passing its return value to removeChangeListener won't match the function passed into addChangeListener created by an earlier bind(this) call.
I see one solution here where bind(this) is called once for each function and the return value is saved and re-used later. That'll work fine. A more popular and slightly cleaner solution is using es6's arrow function.
componentDidMount() {
ProductsStore.addChangeListener(() => { this._onChange() });
}
componentWillUnmount() {
ProductsStore.removeChangeListener(() => { this._onChange());
}
Arrow functions capture the 'this' of the enclosing context without creating new functions each time. It's sort of designed for stuff like this.
As you already got to know the solution here, I will try to explain what's happening.
As per ES5 standard, we used to write following code to add and remove listener.
componentWillMount: function() {
BaseStore.addChangeListener("ON_API_SUCCESS", this._updateStore);
},
componentWillUnmount: function() {
BaseStore.removeChangeListener("ON_API_SUCCESS", this._updateStore);
}
In above code, memory reference for the callback function (ie: this._updateStore) is same. So, removeChangeListener will look for reference and will remove it.
Since, ES6 standard lacks autobinding this by default you have to bind this explicitly to the function.
Note: Bind method returns new reference for the callback.
Refer here for more info about bind
This is where problem occurs. When we do this._updateStore.bind(this), bind method returns new reference for that function. So, the reference that you have sent as an argument to addChangeListener is not same as the one in removeChangeListener method.
this._updateStore.bind(this) != this._updateStore.bind(this)
Solution:
There are two ways to solve this problem.
1. Store the event handler (ie: this._updateStore) in constructor as a member variable. (Your solution)
2. Create a custom changeListener function in store that will bind this for you. (Source: here)
Solution 1 explanation:
constructor (props) {
super(props);
/* Here we are binding "this" to _updateStore and storing
that inside _updateStoreHandler member */
this._updateStoreHandler = this._updateStore.bind(this);
/* Now we gonna user _updateStoreHandler's reference for
adding and removing change listener */
this.state = {
data: []
};
}
componentWillMount () {
/* Here we are using member "_updateStoreHandler" to add listener */
BaseStore.addChangeListener("ON_STORE_UPDATE", this._updateStoreHandler);
}
componentWillUnmount () {
/* Here we are using member "_updateStoreHandler" to remove listener */
BaseStore.removeChangeListener("ON_STORE_UPDATE", this._updateStoreHandler);
}
In above code, we are binding this to _updateStore function and assigning that to a member inside constructor. Later we are using that member to add and remove change listener.
Solution 2 explanation:
In this method, we modify BaseStore functionalities. Idea is to modify addChangeListener function in BaseStore to receive second argument this and inside that function we are binding this to the callback and storing that reference, so that while removing change listener we can remove with that reference.
You can find complete code gist here and source here.