Javascript 在React Native中设置超时

我正在尝试加载内置React Native的iOS应用程序的启动屏幕。我试图通过类状态和setTimeout函数来实现这一点，如下所示：

class CowtanApp扩展组件{
建造师（道具）{
超级（道具）；
此.state={
时间流逝：错误
};
}
render（）{
setTimeout（函数（）{this.setState（{timePassed:true}}），1000）；
如果（！this.state.timePassed）{
返回；
}否则{
返回(
);
}
}
}

---

加载页面工作一秒钟，然后我猜当setTimeout试图将状态更改为true时，我的程序崩溃：“undefined不是对象（评估this.setState）”。我已经做了几个小时了，有没有办法解决这个问题？

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

class CowtanApp扩展组件{
建造师（道具）{
超级（道具）；
此.state={
时间流逝：错误
};
}
componentDidMount（）{
此.setTimeout（（）=>{
this.setTimePassed（）；
},1000);
}
setTimePassed（）{
this.setState（{timePassed:true}）；
}
render（）{
如果（！this.state.timePassed）{
返回；
}否则{
返回(
);
}
}
}

经典的javascript错误

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

当

setTimeout

运行

this.setState

时，

此

不再是

CowtanApp

，而是

窗口

。如果使用

=>

符号定义函数，es6将自动绑定

此

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

或者，您可以使用

let that=this

在

渲染的顶部，然后切换引用以使用局部变量

render() {
  let that = this;
  setTimeout(function(){that.setState({timePassed: true})}, 1000);

如果不工作，请使用
bind

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

通过将
.bind（this）
直接添加到函数定义的末尾，可以将
此
绑定到函数。您可以将代码块重写为：

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

更改此代码：

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

对下列事项：

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

在ReactNative.53上，以下内容适用于我：

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

“setTimeout”是本机库函数。

“this.timeoutCheck”是保存超时对象的变量。

“this.setTimePassed”是我在超时时要调用的函数。
如上所述，可能对某些人有所帮助

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);

当手机/仿真器的时间与服务器（react native packager正在运行的服务器）的时间不同时，可能会出现问题。就我而言，手机和电脑的时间相差1分钟。在同步它们之后（没有做任何奇怪的事情，手机设置为手动时间，我只是将其设置为使用网络（sim卡）提供的时间），一切正常。github问题帮助我找到了问题所在

切勿在
render
方法中调用
setState

您应该永远不要在
render
方法中调用
setState
为什么？调用
setState
最终再次触发
render
方法。这意味着您在一个永远不会结束的循环中调用setState（在
render
块中提到）。正确的方法是使用
componentDidMount
hook-in-React，如下所示：

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/>
  }
}

class CowtanApp扩展组件{
状态={
时间流逝：错误
}
组件安装（）{
setTimeout（（）=>this.setState（{timePassed:true}），1000）
}
渲染（）{
是否返回this.state.timePassed(
) : 
}
}

PS使用三元运算符来实现更干净、更短和可读的代码

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

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

简单的Settimout函数在6000毫秒后触发。如果有人需要，您也可以使计时器异步并等待：

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

用法：

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

简单
setTimeout（（）=>{this.setState（{loaded:true}），1000）将其用于超时。
从'React'导入React，{Component}；
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;

从“react native”导入{样式表、视图、文本}；
类应用程序扩展组件{
componentDidMount（）{
设置超时（（）=>{
this.props.navigation.replace（'LoginScreen'）；
}, 2000);
}
render（）{
返回(
自然反应
);
}
}
const styles=StyleSheet.create({
主视图：{
弹性：1，
对齐项目：“居中”，
为内容辩护：“中心”，
},
});
导出默认应用程序；
好的，这很有效-谢谢！你们能解释一下为什么它不能在render中工作吗？我想你们根本不能在render方法中写任何指令。您可以将componentWillMount或componentDidMount函数用于启动指令。由于作用域问题，该函数无法工作。在您的原始代码中有setTineout（function（）{，当它在该块中时，它指的是组件以外的东西。这里的答案的另一个替代方法是简单地将setTimeout调用更改为“ES2015 Fat Arrow Sytax”，如：setTimeout（（）=>this.setState（…）救了我，谢谢！我是js新手，这可能有点傻，但有没有办法用“传统”函数（）来实现它{}方法？请注意，通常您不会在
render
方法中调用
setTimeout
。这是一种React反模式，用于修改状态或在render中产生副作用。此外，还会为每个渲染密码检查创建一个新的计时器，以确保您的设备的时间与您的计算机的时间匹配！这发生在我身上，不幸的是，我花了一个小时ng在进行
debug
时，由于某种原因，我所能看到的是
setTimeout
在
render
方法中使用，这将为每个渲染创建一个新的超时…在
render
中创建副作用是一个反模式。其余问题已经得到解答