admin管理员组文章数量:1031308
I created a simple login page, which, once the button is pressed, executes this function :
login = (email, password, navigate) => {
this.setState({ loginButtonPressed: true });
firebase
.auth()
.signInWithEmailAndPassword(email, password)
.then(function(user) {
navigate('Profile');
})
.catch(function(error) {
this.setState({ loginButtonPressed: false });
Alert.alert(error.toString());
});
};
Once called, it executes "this.setState({ loginButtonPressed: true })" since the button changes shape (it is marked as pressed). But I get the following error: Undefined is not a function this.setState.
How can this be fixed? Thanks for your help.
I created a simple login page, which, once the button is pressed, executes this function :
login = (email, password, navigate) => {
this.setState({ loginButtonPressed: true });
firebase
.auth()
.signInWithEmailAndPassword(email, password)
.then(function(user) {
navigate('Profile');
})
.catch(function(error) {
this.setState({ loginButtonPressed: false });
Alert.alert(error.toString());
});
};
Once called, it executes "this.setState({ loginButtonPressed: true })" since the button changes shape (it is marked as pressed). But I get the following error: Undefined is not a function this.setState.
How can this be fixed? Thanks for your help.
Share Improve this question edited Apr 13, 2018 at 16:47 Tomasz Mularczyk 36.3k19 gold badges118 silver badges174 bronze badges asked Apr 13, 2018 at 16:42 JeanJean 2014 silver badges12 bronze badges5 Answers
Reset to default 5The problem is with:
.catch(function(error) {
this.setState({ loginButtonPressed: false });
Alert.alert(error.toString());
});
you create an anonymous function where this will reference this anonymous function (Object), not a React Object.
I see you can use arrow functions, so fix it like:
.catch((error) => {
this.setState({ loginButtonPressed: false });
Alert.alert(error.toString());
});
With arrow function this will reference context in which it is used.
Or you can keep a copy of the reference to this, like this:
const self = this; (first line in your function);
and use "self" instead of "this" anywhere in the function.
You can use this in places where you might not be able to use arrow functions.
You need to bind to this in order to have access inside the callback. Try it with the arrow functions.
Are you extending react ponent?
If you are not you will need to do that to utilize setState, if you are you will need to be sure to create the state in a constructor before you update it with setState elsewhere.
Something along the lines of:
class Login extends React.Component {
constructor(props) {
super(props);
this.state = { loginButtonPressed: false };
this.login = this.login.bind(this);
}
login(email, password, navigate) {
this.setState({ loginButtonPressed: true });
firebase
.auth()
.signInWithEmailAndPassword(email, password)
.then(function(user) {
navigate('Profile');
})
.catch(function(error) {
this.setState({ loginButtonPressed: false });
Alert.alert(error.toString());
});
};
render() {
return (
<Button onClick={this.logIn}>Login</Button>
);
}
}
An arrow function remembers it lexical scope. Refer MDN documentation -- "An arrow function does not newly define its own 'this' when it's being executed in the global context; instead, the 'this' value of the enclosing lexical context is used, equivalent to treating this as closure value. Thus, in the following code, the 'this' within the function that is passed to setInterval has the same value as 'this' in the enclosing function:" function Person() { this.age = 0;
setInterval(() => {
this.age++; // |this| properly refers to the person object
}, 1000);
}
var p = new Person();
I created a simple login page, which, once the button is pressed, executes this function :
login = (email, password, navigate) => {
this.setState({ loginButtonPressed: true });
firebase
.auth()
.signInWithEmailAndPassword(email, password)
.then(function(user) {
navigate('Profile');
})
.catch(function(error) {
this.setState({ loginButtonPressed: false });
Alert.alert(error.toString());
});
};
Once called, it executes "this.setState({ loginButtonPressed: true })" since the button changes shape (it is marked as pressed). But I get the following error: Undefined is not a function this.setState.
How can this be fixed? Thanks for your help.
I created a simple login page, which, once the button is pressed, executes this function :
login = (email, password, navigate) => {
this.setState({ loginButtonPressed: true });
firebase
.auth()
.signInWithEmailAndPassword(email, password)
.then(function(user) {
navigate('Profile');
})
.catch(function(error) {
this.setState({ loginButtonPressed: false });
Alert.alert(error.toString());
});
};
Once called, it executes "this.setState({ loginButtonPressed: true })" since the button changes shape (it is marked as pressed). But I get the following error: Undefined is not a function this.setState.
How can this be fixed? Thanks for your help.
Share Improve this question edited Apr 13, 2018 at 16:47 Tomasz Mularczyk 36.3k19 gold badges118 silver badges174 bronze badges asked Apr 13, 2018 at 16:42 JeanJean 2014 silver badges12 bronze badges5 Answers
Reset to default 5The problem is with:
.catch(function(error) {
this.setState({ loginButtonPressed: false });
Alert.alert(error.toString());
});
you create an anonymous function where this will reference this anonymous function (Object), not a React Object.
I see you can use arrow functions, so fix it like:
.catch((error) => {
this.setState({ loginButtonPressed: false });
Alert.alert(error.toString());
});
With arrow function this will reference context in which it is used.
Or you can keep a copy of the reference to this, like this:
const self = this; (first line in your function);
and use "self" instead of "this" anywhere in the function.
You can use this in places where you might not be able to use arrow functions.
You need to bind to this in order to have access inside the callback. Try it with the arrow functions.
Are you extending react ponent?
If you are not you will need to do that to utilize setState, if you are you will need to be sure to create the state in a constructor before you update it with setState elsewhere.
Something along the lines of:
class Login extends React.Component {
constructor(props) {
super(props);
this.state = { loginButtonPressed: false };
this.login = this.login.bind(this);
}
login(email, password, navigate) {
this.setState({ loginButtonPressed: true });
firebase
.auth()
.signInWithEmailAndPassword(email, password)
.then(function(user) {
navigate('Profile');
})
.catch(function(error) {
this.setState({ loginButtonPressed: false });
Alert.alert(error.toString());
});
};
render() {
return (
<Button onClick={this.logIn}>Login</Button>
);
}
}
An arrow function remembers it lexical scope. Refer MDN documentation -- "An arrow function does not newly define its own 'this' when it's being executed in the global context; instead, the 'this' value of the enclosing lexical context is used, equivalent to treating this as closure value. Thus, in the following code, the 'this' within the function that is passed to setInterval has the same value as 'this' in the enclosing function:" function Person() { this.age = 0;
setInterval(() => {
this.age++; // |this| properly refers to the person object
}, 1000);
}
var p = new Person();
本文标签： javascriptUndefined is not a function thissetStateStack Overflow
版权声明：本文标题：javascript - Undefined is not a function this.setState - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745640593a2160722.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论