React Native의 setTimeout

React Native의 setTimeout

---

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

로딩 페이지가 1 초 동안 작동 한 다음 setTimeout이 상태를 true로 변경하려고하면 내 프로그램이 충돌합니다. 'undefined는 객체가 아닙니다 (this.setState 평가)'. 몇 시간 동안이 문제를 해결하는 방법에 대한 아이디어가 있습니까?

---

고전적인 자바 스크립트 실수.

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

---

settimeout에 대한 새 함수를 작성하십시오. Pls는 이것을 시도합니다.

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

---

이 코드를 변경하십시오.

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'는 시간 초과시 호출 할 함수입니다.

---

함수 정의 끝에 직접 this추가하여 함수에 바인딩 할 수 있습니다 .bind(this). 코드 블록을 다음과 같이 다시 작성합니다.

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

---

There looks to be an issue when the time of the phone/emulator is different to the one of the server (where react-native packager is running). In my case there was a 1 minute difference between the time of the phone and the computer. After synchronizing them (didn't do anything fancy, the phone was set on manual time, and I just set it to use the network(sim) provided time), everything worked fine. This github issue helped me find the problem.

---

Same as above, might help some people.

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

---

Never call setState inside render method

You should never ever call setState inside the render method. Why? calling setState eventually fires the render method again. That means you are calling setState (mentioned in your render block) in a loop that would never end. The correct way to do that is by using componentDidMount hook in React, like so:

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 Use ternary operators for cleaner, shorter and readable code.

---

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

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

Simple, Settimout function get triggered after 6000 milliseonds

참고URL : https://stackoverflow.com/questions/34504322/settimeout-in-react-native