[英]React Native w/ TypeScript this.setState is not a function
I'm currently using React Native 0.39.2 w/ newest TypeScript and when I run my componentDidMount() method and setState I get an error around this.setState is not a function. 我目前正在使用带有最新TypeScript的React Native 0.39.2,当我运行componentDidMount()方法和setState时,我在this周围收到错误.setState不是一个函数。
I tried binding with this.setState({isLoggedIn: true}).bind(this)
我尝试使用this.setState({isLoggedIn: true}).bind(this)
though since I'm using a boolean as the type it won't let me without giving a type error and even setting to any type still gets same error. 尽管由于我使用布尔值作为类型,所以在不给出类型错误的情况下我也不会允许我这样做,即使设置为任何类型仍然会遇到相同的错误。
here's my code 这是我的代码
First with my interface for State 首先用我的状态界面
import React, {
Component
} from 'react';
import { AppRegistry, View, StyleSheet, Text } from 'react-native';
import { Actions } from 'react-native-router-flux';
import Firestack from 'react-native-firestack';
const firestack = new Firestack();
interface Props {
}
interface State {
isLoggedIn?: boolean;
}
export default class MainList extends Component<Props, State> {
state = {
isLoggedIn: false,
};
constructor(props: any) {
super(props);
console.log("Is anyone logged in?: " + this.isLoggedIn);
}
isLoggedIn = this.state.isLoggedIn;
componentDidMount() {
if (!this.isLoggedIn) {
Actions.welcome();
}
firestack.auth.listenForAuth(function(evt: any) {
// evt is the authentication event
// it contains an `error` key for carrying the
// error message in case of an error
// and a `user` key upon successful authentication
if (!evt.authenticated) {
// There was an error or there is no user
//console.error(evt.error);
this.setState({isLoggedIn: false});
console.log("The state of isLoggedIn is: " + this.isLoggedIn);
} else {
// evt.user contains the user details
console.log('User details', evt.user);
this.setState({isLoggedIn: true});
console.log("The state of isLoggedIn is: " + this.isLoggedIn);
}
});
}
render() {
return (
<View style={styles.View}>
<Text style={styles.textLabel}>The main view</Text>
</View>
)
}
}
const styles = StyleSheet.create({
View: {
padding: 20
},
textLabel: {
fontSize: 20,
marginBottom: 10,
height: 20
},
textInput: {
height: 20,
fontSize: 15,
marginBottom: 20
}
});
AppRegistry.registerComponent('MainList', ()=> MainList);
Is there anything I'm missing here? 我在这里想念什么吗?
The issue is because in the callback function for listenForAuth
, this
is no longer referring to the MainList
object. 问题是因为在listenForAuth
的回调函数中, this
不再引用MainList
对象。
Try switching to arrow function expression which solve the this
binding issue: 尝试切换到箭头函数表达式来解决this
绑定问题:
firestack.auth.listenForAuth((evt: any) => {
...
});
Here is a good read if you want to know more about arrow function. 如果您想了解更多有关箭头功能的信息,请阅读这里 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.