[英]setTimeout in React Native
我正在尝试为使用 React Native 构建的 iOS 应用程序加载启动画面。 我正在尝试通过类状态和 setTimeout 函数来完成此操作,如下所示:
class CowtanApp extends Component {
constructor(props){
super(props);
this.state = {
timePassed: false
};
}
render() {
setTimeout(function(){this.setState({timePassed: true})}, 1000);
if (!this.state.timePassed){
return <LoadingPage/>;
}else{
return (
<NavigatorIOS
style = {styles.container}
initialRoute = {{
component: LoginPage,
title: 'Sign In',
}}/>
);
}
}
}
加载页面工作了一秒钟,然后我猜想当 setTimeout 试图将状态更改为 true 时,我的程序崩溃了:“undefined is not an object (evaluating this.setState)”。 我已经做了几个小时了,关于如何解决它有什么想法吗?
经典的 javascript 错误。
setTimeout(function(){this.setState({timePassed: true})}, 1000)
当setTimeout
运行this.setState
时, this
不再是CowtanApp
,而是window
。 如果您使用=>
符号定义函数,es6 将自动绑定this
。
setTimeout(() => {this.setState({timePassed: true})}, 1000)
或者,您可以使用let that = this;
在render
的顶部,然后切换您的引用以使用局部变量。
render() {
let that = this;
setTimeout(function(){that.setState({timePassed: true})}, 1000);
如果不起作用,请使用bind
。
setTimeout(
function() {
this.setState({timePassed: true});
}
.bind(this),
1000
);
为 settimeout 编写一个新函数。 请试试这个。
class CowtanApp extends Component {
constructor(props){
super(props);
this.state = {
timePassed: false
};
}
componentDidMount() {
this.setTimeout( () => {
this.setTimePassed();
},1000);
}
setTimePassed() {
this.setState({timePassed: true});
}
render() {
if (!this.state.timePassed){
return <LoadingPage/>;
}else{
return (
<NavigatorIOS
style = {styles.container}
initialRoute = {{
component: LoginPage,
title: 'Sign In',
}}/>
);
}
}
}
const getData = () => {
// some functionality
}
const that = this;
setTimeout(() => {
// write your functions
that.getData()
},6000);
简单,Settimout 功能在 6000 毫秒后触发
更改此代码:
setTimeout(function(){this.setState({timePassed: true})}, 1000);
到以下内容:
setTimeout(()=>{this.setState({timePassed: true})}, 1000);
在 ReactNative.53 上,以下对我有用:
this.timeoutCheck = setTimeout(() => {
this.setTimePassed();
}, 400);
'setTimeout' 是 ReactNative 库函数。
'this.timeoutCheck' 是我保存超时对象的变量。
'this.setTimePassed' 是我在超时时调用的函数。
如果有人需要,您还可以使计时器异步并等待它:
export const delay = (ms) => new Promise((res) => setTimeout(res, ms));
用法:
// do something
await delay(500); // wait 0.5 seconds
// do something else
您可以通过将.bind(this)
直接添加到函数定义的末尾来将this
绑定到您的函数。 您可以将代码块重写为:
setTimeout(function () {
this.setState({ timePassed: true });
}.bind(this), 1000);
永远不要在
render
方法中调用setState
你永远不应该在render
方法中调用setState
。 为什么? 调用setState
最终会再次触发render
方法。 这意味着你在一个永远不会结束的循环中调用 setState (在你的render
块中提到)。 正确的做法是在 React 中使用componentDidMount
钩子,如下所示:
class CowtanApp extends Component {
state = {
timePassed: false
}
componentDidMount () {
setTimeout(() => this.setState({timePassed: true}), 1000)
}
render () {
return this.state.timePassed ? (
<NavigatorIOS
style = {styles.container}
initialRoute = {{
component: LoginPage,
title: 'Sign In',
}}/>
) : <LoadingPage/>
}
}
PS 使用三元运算符以获得更简洁、更短和可读的代码。
我正在尝试为React Native内置的iOS应用加载启动画面。 我试图通过类状态,然后通过setTimeout函数来完成此操作,如下所示:
class CowtanApp extends Component {
constructor(props){
super(props);
this.state = {
timePassed: false
};
}
render() {
setTimeout(function(){this.setState({timePassed: true})}, 1000);
if (!this.state.timePassed){
return <LoadingPage/>;
}else{
return (
<NavigatorIOS
style = {styles.container}
initialRoute = {{
component: LoginPage,
title: 'Sign In',
}}/>
);
}
}
}
加载页面会工作一秒钟,然后我猜想setTimeout尝试将状态更改为true时,我的程序崩溃了:“未定义不是对象(正在评估this.setState)”。 我已经花了几个小时了,关于如何解决它的任何想法?
当电话/模拟器的时间与服务器之一(运行本机打包程序的地方)不同时,似乎存在问题。 在我的例子中,手机和电脑的时间相差 1 分钟。 同步它们后(没有做任何花哨的事情,手机设置为手动时间,我只是将其设置为使用网络(sim)提供的时间),一切正常。 这个github问题帮助我找到了问题。
import React, {Component} from 'react';
import {StyleSheet, View, Text} from 'react-native';
class App extends Component {
componentDidMount() {
setTimeout(() => {
this.props.navigation.replace('LoginScreen');
}, 2000);
}
render() {
return (
<View style={styles.MainView}>
<Text>React Native</Text>
</View>
);
}
}
const styles = StyleSheet.create({
MainView: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
export default App;
同上,可能对某些人有帮助。
setTimeout(() => {
if (pushToken!=null && deviceId!=null) {
console.log("pushToken & OS ");
this.setState({ pushToken: pushToken});
this.setState({ deviceId: deviceId });
console.log("pushToken & OS "+pushToken+"\n"+deviceId);
}
}, 1000);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.