Question

我正在尝试为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时，我的程序崩溃：＆＃39; undefined不是对象（评估this.setState）＆＃39;。我已经花了几个小时，关于如何修复它的任何想法？

Answer 1

经典的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);

Answer 2

为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',
      }}/>
  );
}
}
}

Answer 3

在ReactNative .53上，以下对我有用：

 this.timeoutCheck = setTimeout(() => {
   this.setTimePassed();
   }, 400);

'setTimeout'是ReactNative库函数。
“ this.timeoutCheck”是我的变量，用于保存超时对象。
“ this.setTimePassed”是我在超时时要调用的函数。

Answer 4

简单的setTimeout(()=>{this.setState({loaded: true})}, 1000);使用它来超时。

Answer 5

更改此代码：

setTimeout(function(){this.setState({timePassed: true})}, 1000);

到以下：

setTimeout(()=>{this.setState({timePassed: true})}, 1000);

Answer 6

当电话/仿真器的时间与服务器（正在运行react-native打包程序的服务器）的时间不同时，似乎会出现问题。以我为例，手机和计算机之间的时间相差1分钟。同步它们之后（没有做任何花哨的事情，电话被设置为手动时间，而我只是将其设置为使用提供的网络（sim）时间），一切正常。 This github问题帮助我找到了问题。

Answer 7

切勿在{{1}}方法内调用setState

您应该永远永远不要在render方法内调用setState。 为什么？最终调用render方法。这意味着您将在永无休止的循环中调用setState（在setState块中提到）。正确的方法是在React中使用render钩子，像这样：

render

PS使用三元运算符来编写更简洁，更短且可读的代码。

Answer 8

万一有人想要，您还可以使计时器异步并等待它：

export const delay = (ms) => new Promise((res) => setTimeout(res, ms));

用法：

// do something
await delay(500); // wait 0.5 seconds
// do something else

Answer 9

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;

Answer 10

与上述相同，可能会对某些人有所帮助。

{{1}}

Answer 11

const getData = () => {
// some functionality
}

const that = this;
   setTimeout(() => {
   // write your functions    
   that.getData()
},6000);

6000毫秒后触发简单的Settimout函数

React Native中的setTimeout

11 个答案: