Как показывать случайную строку внутри массива каждые 10 секунд - PullRequest
Новая
       24

Как показывать случайную строку внутри массива каждые 10 секунд

0 голосов
/ 28 октября 2019

он работает с console.log, он должен отображаться спереди 

render(){
 var myArray = [
    "Apples",
    "Bananas",
    "Pears"
  ];

  var randomItem = myArray[Math.floor(Math.random()*myArray.length)];
  var intervalId = setInterval(() => {
    var timoutId = setTimeout(() => { 
        console.log(randomItem);
    }, 1000);
 }, 10000);
   return(
    <div>randomItem</div>
   )
 }

console.log показывает случайную строку каждые десять секунд, но он не работает с return ()

Ответы [ 4 ]

1 голос
/ 28 октября 2019
  1. Перемещение установленного интервала внутри компонента, который был монтирован (иначе вы будете создавать интервалы каждый раз, когда компонент выполняет рендеринг)
  2. Инициализация состояния с пустой строкой
  3. setState внутри интервалаэто обновит состояние и заставит компонент повторно визуализировать
  4. использовать состояние внутри функции визуализации
  5. Очистить интервал в componentWillUnmount 

class SomeComponent extends React.Component{
  state={
      randomItem:''
  }

  myArray = [
      "Apples",
      "Bananas",
      "Pears"
  ];

  randomItemGenerator = () => (
      this.myArray[Math.floor(Math.random()*this.myArray.length)]
  )

  componentDidMount(){
      this.interval = setInterval(() => {
          this.setState({randomItem:this.randomItemGenerator()})
      }, 1000)
  }
  componentWillUnmount(){
      this.interval && clearInterval(this.interval)
  }

  render(){
     return(
        <div>{this.state.randomItem} - {Math.floor(Math.random()*100)}</div>
     )
   }

}

ReactDOM.render(
  <SomeComponent />,
  document.getElementById("react")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>

<div id="react"></div>
0 голосов
/ 28 октября 2019 
  const [rndmItem, setRndmItem] = useState();

  const myArray = ["Apples", "Bananas", "Pears"];

  const timoutId = setTimeout(() => {
    var randomItem = myArray[Math.floor(Math.random() * myArray.length)];
    console.log(randomItem);
    setRndmItem(randomItem);
  }, 1000);
  return <div>{rndmItem}</div>;
0 голосов
/ 28 октября 2019

Ваша функция рендеринга реагирующего компонента должна возвращать только представление того, как ваше приложение выглядит в данном состоянии.

Таким образом, вы не должны вносить никаких изменений в функцию рендеринга.

Если вы используете компонент класса, вы можете обработать как состояние вашего приложения изменяется с помощью методов класса и встроенных методов жизненного цикла React. Вот пример: 

class App extends React.Component {
  state = {
    item: ''
  }

  interval = null

  myArray = ["Apples", "Bananas", "Pears"]

  randomItem = () => this.myArray[Math.floor(Math.random() * this.myArray.length)]

  componentDidMount() {
    this.interval = setInterval(() => {
      this.setState({item: this.randomItem()});
    }, 10000);
  }

  componentWillUnmount() {
    clearInterval(this.interval)
  }

  render() {
    return <p>{this.state.item}</p>
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>
0 голосов
/ 28 октября 2019

Что вы получаете? Также используйте JSX при возвращении сюда. Попробуйте {randomItem}

...