Как бы я отобразил случайную строку из массива объектов. На время л oop. [React]

Question

Я пытаюсь сделать простое приложение, отображающее случайную цитату. С интервалом времени. Хотя я изо всех сил пытаюсь понять, как можно рандомизировать цитату по таймеру и отображать содержимое.

Пока мой код:

import { useState } from 'react';

import { data } from './hardCode';

export default function Index() {
  const [quotes, setQuotes] = useState(data);
  console.log(quotes);
  return (
    <main>
      <div className='wrapper'>
        <div className='feature'>
          <div className='quote-wrapper'>
            <h1 className='quote'>"{quotes[0].quote}"</h1>
          </div>
          <div className='author-wrapper'>
            <span className='author'>- {quotes[0].author}</span>
          </div>
        </div>
      </div>
    </main>
  );
}

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

const data = [
  {id: 1, author: 'suzy', quote: 'hello world'}
]

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

Answer 1

Вы можете использовать setTimeout nested или setInterval, и вы можете использовать наблюдателя для отслеживания ранее использованных идентификаторов, и как только он пройдет через сеанс, мы можем сбросить таймер и наблюдателя

const data = [
  {id: 1, author: 'suzy', quote: 'hello world'},
  {id: 4, author: 'bob', quote: 'hello world 2'},
  {id: 3, author: 'carrie', quote: 'hello world 3'},
  {id: 5, author: 'timmy', quote: 'hello world 4'},
  {id: 2, author: 'bob', quote: 'hello world 5'},
];

function observerReset(){
  if(Date.now() - timer >= 2000 * data.length && Object.keys(observer).length === data.length){
    console.log('observer reset')
    observer = {}
    timer = Date.now()
  }
}

function randomIndex(){
  let randIndex = undefined
  while(observer[randIndex] === undefined){
    randIndex = Math.floor( Math.random() * data.length);
    if(observer[randIndex] === undefined ){
      observer[randIndex] = randIndex
    } else {
      randIndex = undefined
    }
  }
  return randIndex
}

let observer = {}

let timer =  Date.now()

setTimeout(function quotePrinter() {
  observerReset()
  let randIndex = randomIndex();
  let {
    author,
    quote
  } = data[randIndex]
  console.log(`${author}: ${quote}`);
  setTimeout(quotePrinter, 2000)
}, 2000)

Answer 2

Сначала вы должны импортировать данные как полный набор объектов obj, затем создать случайную функцию, такую ​​как

const rand = function () {
return Math.floor(Math.random() * data.length)

}

и использовать ее

< h1 className = 'quote' > { data[rand()].quote }</h1 >

, также вы можете использовать

< span className = 'author' > - { data[rand()].author }</span >

Answer 3

Вычислить случайный индекс Math.floor(Math.random() * data.length)

const data = [
  {id: 1, author: 'suzy', quote: 'hello world'},
  {id: 4, author: 'bob', quote: 'hello world 2'},
  {id: 3, author: 'carrie', quote: 'hello world 3'},
  {id: 5, author: 'timmy', quote: 'hello world 4'},
  {id: 2, author: 'bob', quote: 'hello world 5'},
];

const randIndex = Math.floor(Math.random() * data.length);

console.log(data[randIndex].quote);

RandomQuote

const getRandIndex = arr => Math.floor(Math.random() * arr.length);

const RandomQuote = ({ data, interval = 2000 }) => {
  const [quotes, setQuotes] = useState(data);
  const [currentQuote, setCurrentQuote] = useState();

  /**
   * Select a quote at random and remove from the current list of
   * selectable quotes, reducing the array length by 1
   */
  const getRandomQuote = useCallback(() => {
    const randIndex = getRandIndex(quotes);
    setCurrentQuote(quotes[randIndex]);
    setQuotes(quotes => quotes.filter((_, i) => i !== randIndex));
  }, [quotes]);

  // Get initial random quote and setup interval and cleanup function
  useEffect(() => {
    !currentQuote && getRandomQuote();
    const timer = quotes.length && setInterval(getRandomQuote, interval);
    return () => clearInterval(timer);
  }, [currentQuote, getRandomQuote, interval, quotes]);

  return (
    <main>
      <div className="wrapper">
        <div className="feature">
          {currentQuote && (
            <Fragment>
              <div className="quote-wrapper">
                <h1 className="quote">"{currentQuote.quote}"</h1>
              </div>
              <div className="author-wrapper">
                <span className="author">- {currentQuote.author}</span>
              </div>
            </Fragment>
          )}
        </div>
      </div>
    </main>
  );
};