Есть ли способ отобразить <Text> с таймером setTimeout() несколько раз?

Я пытаюсь вернуть 9 разных текстов с 5-секундной задержкой между каждым, но он работает только для первого текста.

я пытался использовать

  render() {
    setTimeout(() => {this.setState({timePassed: true})}, 2000);
    if(this.state.timePassed == false){
      return (
        <Text></Text>
      )
    }else if (this.state.timePassed == true{
      return(
        <Text>HELLO</Text>
      )
    }else if (this.state.timePassed1 == false{
............
  }
}

но не работает я тоже пробовал

  componentDidUpdate(){
    setTimeout(() => {this.setState({timePassed1: true})}, 4000);
    if(this.state.timePassed1 == true){
      return(
      <Text>test</Text>)
    }
}

но не работает

Вот мой экран

export default class Internet2 extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      timePassed: false,
      timePassed1: false
    };
  }

  componentDidUpdate(){
    setTimeout(() => {this.setState({timePassed1: true})}, 4000);
    if(this.state.timePassed1 == true){
      return(
      <Text>test</Text>)
    }
}

  render() {
    setTimeout(() => {this.setState({timePassed: true})}, 2000);
    if(this.state.timePassed == false){
      return (
        <Text></Text>
      )
    }else{
      return(
        <Text>HELLO</Text>
      )
    }
  }
}

Спасибо за помощь !

3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
0
0
575
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Я нашел решение, оно в рендере, и вам нужно сделать так:

  constructor(props){
    super(props);
    this.state = {
      timePassed: false,
      timePassed1: false
    };
  }

  render() {
    setTimeout(() => {this.setState({timePassed: true})}, 2000);
    setTimeout(() => {this.setState({timePassed1: true})}, 3000);
      return (
        <View>
        {this.state.timePassed == true ? (<Text>INTERNET</Text>) : null}
        {this.state.timePassed1 == true ? (<Text>TEST</Text>) : null}
        </View>
      )

  }
}

Добавлять setTimeout в метод рендеринга нехорошо, при каждом рендеринге вы будете вызывать новый setTimeOut.

Vencovsky 22.05.2019 16:03
Ответ принят как подходящий

Что вы можете сделать, так это сохранить тексты в массиве и переменной для подсчета того, сколько раз он прошел.

state = {
    texts = ['sometext', ...]
    textCount = 0
}

Затем вы создадите цикл setInterval в нужное вам время.

componentDidMount() {
    let timer = setInterval(() => {
        this.setState(prevState => {
            return {textCount: prevState.textCount + 1}
        })
        if (this.state.textCount > this.state.texts.length) clearInterval(timer);
    }, theTimeYouWant);
}

И визуализируйте тексты, используя .map

  render() {
      return (
        <View>
            {this.state.texts.map((text, i) => i <= this.state.textCount ?
               <Text>{text}</Text> : null
            )}
        </View>
      )
  }

Другие вопросы по теме