SetTimeout in React Native

Я пытаюсь загрузить заставку для приложения iOS, созданного в React Native. Я пытаюсь выполнить это через состояния класса, а затем функцию 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 не является объектом (оценивающим this.setState)'. Я собираюсь на это пару часов, какие-нибудь идеи о том, как исправить это?

Ответы

Ответ 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);

Ответ 2

Напишите новую функцию для установки. Попробуйте это.

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

Ответ 3

Изменить этот код:

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

на следующее:

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

Ответ 4

На ReactNative.53 у меня работает следующее:

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

'setTimeout' - это функция библиотеки ReactNative.
this.timeoutCheck - моя переменная для хранения объекта тайм-аута.
this.setTimePassed - это моя функция, которая вызывается во время ожидания.

Ответ 5

Вы можете связать this с вашей функцией, добавив .bind(this) непосредственно в конец определения вашей функции. Вы переписали бы свой блок кода как:

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

Ответ 6

Кажется, есть проблема, когда время телефона/эмулятора отличается от времени на сервере (на котором запущен реагирующий пакет). В моем случае разница между временем телефона и компьютера составляла 1 минуту. После их синхронизации (ничего необычного не было, телефон был установлен на ручное время, и я просто настроил его на использование времени, предоставленного сетью (sim)), все работало нормально. Эта проблема с github помогла мне найти проблему.

Ответ 7

То же, что и выше, может помочь некоторым людям.

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

Ответ 8

Никогда не вызывайте setState внутри метода render

Вы никогда не должны never ever вызывать setState внутри метода render. Почему? вызов setState в конце концов снова вызывает метод render. Это означает, что вы вызываете setState (упомянутый в вашем блоке render) в цикле, который никогда не закончится. Правильный способ сделать это - использовать ловушку componentDidMount в 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/>
  }
}

PS Используйте троичные операторы для более чистого, короткого и удобочитаемого кода.

Ответ 9

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

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

Простая функция Settimout запускается через 6000 миллисекунд