setTimeout у 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)'. Я займаюся цим вже пару годин, чи є ідеї щодо того, як це виправити?

Класична помилка JavaScript.

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

Коли setTimeoutбіжить this.setState, thisвже немає CowtanApp, але window. Якщо ви визначите функцію з =>позначенням, es6 автоматично зв’яжеться this.

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

Крім того, ви можете використовувати a 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
);

Напишіть нову функцію для часу очікування. Будь ласка, спробуйте це.

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

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);використовуйте це для тайм-ауту.

Виглядає проблема, коли час роботи телефону / емулятора відрізняється від часу сервера (де працює реактор-рідний пакувальник). У моєму випадку була різниця в 1 хвилину між часом роботи телефону та комп’ютера. Після їх синхронізації (нічого фантастичного не зробив, телефон був налаштований на ручний час, і я просто налаштував його використовувати мережу (передбачений час)), все працювало нормально. Ця проблема з github допомогла мені знайти проблему.

Ніколи не викликайте setStateвнутрішній renderметод

Ви ніколи не повинні дзвонити 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 Використовуйте потрійні оператори для більш чистого, коротшого та читабельного коду.

Як і вище, це може допомогти деяким людям.

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