Блог

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

 import React from 'react' import { useEffect, useState } from 'react'  const QuoteGenerator = () =gt; {  //Initializing quote and quotes  const [quotes, setQuotes] = useState([])  const [quote, setQuote] = useState([])  //Fetching our quote list  useEffect(() =gt; {  fetch('https://jsonplaceholder.typicode.com/posts')  .then(res =gt; res.json())  .then(data =gt; setQuotes([...data])) }, [])  //This function is used to update the current quote displayed to a new quote when our button  //is clicked const setNewQuote = () =gt; {  const index = Math.floor(Math.random() * 100)  return setQuote(quotes.slice(index, index   1 )) } //On launch quoteEntry is an empty array. //I want to set the default state of quote to a random array from quotes containing one  //object. const quoteEntry = quote.map(item =gt; (  lt;div key={item.id}gt;  lt;h3gt;{item.title}lt;/h3gt;  lt;/divgt; )) return ( //What you see in browser  lt;divgt;  lt;h1gt;Your Quotelt;/h1gt;  lt;br /gt;  lt;divgt;  lt;h5gt;{quoteEntry}lt;/h5gt;  lt;/divgt;  lt;br /gt;  lt;button onClick={setNewQuote}gt;New quotelt;/buttongt;  lt;/divgt; ) }  export default QuoteGenerator  

Вы можете попробовать что-то вроде этого

 import React from 'react'  import { useEffect, useState } from 'react'   const QuoteGenerator = () =gt; {  //Initializing quote and quotes  const [quotes, setQuotes] = useState([]);  const [quote, setQuote] = useState([]);  //Fetching our quote list  useEffect(() =gt; {  fetch("https://jsonplaceholder.typicode.com/posts")  .then((res) =gt; res.json())  .then((data) =gt; {  setQuotes([...data]);  const index = Math.floor(Math.random() * 100);  setQuote([...data.slice(index, index   1)]);  });  }, []);    //This function is used to update the current quote displayed to a new quote when our button  //is clicked  const setNewQuote = () =gt; {  const index = Math.floor(Math.random() * 100);  setQuote(quotes.slice(index, index   1));  };  //On launch quoteEntry is an empty array.  //I want to set the default state of quote to a random array from quotes containing one  //object.  function quoteEntry() {  return quote.map((item) =gt; (  lt;div key={item.id}gt;  lt;h3gt;{item.title}lt;/h3gt;  lt;/divgt;  ));  }  return (  //What you see in browser  lt;divgt;  lt;h1gt;Your Quotelt;/h1gt;  lt;br /gt;  lt;divgt;  lt;h5gt;{quoteEntry()}lt;/h5gt;  lt;/divgt;  lt;br /gt;  lt;button onClick={setNewQuote}gt;New quotelt;/buttongt;  lt;/divgt;  );  };    export default QuoteGenerator