#arrays #reactjs #json #react-hooks #axios
#массивы #реагирует на #json #реагируют-крючки #аксиос
Вопрос:
В настоящее время я работаю над веб-сайтом, который, когда я его открываю, всегда должен печатать случайную цитату из API. Однако, когда я открываю API, он не случайным образом отображает цитату в формате json, а выводит все цитаты, хранящиеся в массиве. Моя проблема в том, что на моем сайте все кавычки крутятся до тех пор, пока отладчик не остановится из-за нехватки памяти. Как я могу заставить функцию карты отображать только первые данные массива? Мой код:
const randomIndex = (arr) =gt; { // returns a random int value to use as an index return Math.floor(Math.random() * arr.length); }; const [quote, setQuote] = useState(""); const [index, setIndex] = useState(0); const QuoteAPI = async () =gt; { let arrayOfQuotes = []; const data = await axios.get("https://type.fit/api/quotes"); arrayOfQuotes = data.data; console.log(arrayOfQuotes); const quote = arrayOfQuotes.map((arrayOfQuote) =gt; ( lt;div key={arrayOfQuote.id}gt; lt;h3gt;{arrayOfQuote.text}lt;/h3gt; lt;pgt;{arrayOfQuote.author}lt;/pgt; lt;/divgt; )); console.log(quote); setQuote(quote); }; useEffect(() =gt; { QuoteAPI(); setIndex(randomIndex(quote)); }, [quote]); Комментарии:
1. Несколько неуверен в том, какова ваша цель здесь. Основываясь на ссылочном URL-адресе, кажется, что существует только твердое состояние из более чем 1600 цитат. Если вы пытаетесь использовать только 1 случайную цитату, вы делаете это неправильно. При загрузке вы должны извлечь данные, а затем случайным образом выбрать цитату на основе длины массива, и я бы кэшировал все цитаты и построил второй массив только из цитат, которые вы использовали, чтобы ваш случайный не повторялся.
2. Будет ли адаптер axios-кэша хорошим выбором для кэширования?
3. Я не играл с ним, не знал бы, не исследуя. В идеале я бы использовал
localstorageдля хранения цитат и ссылок соответственно. Также зависит от того, есть ли области, которые вы собираетесь использовать, которые могут быть рассмотрены в контексте создания для этого.4. Я использую localstorage. Я стараюсь, спасибо за вашу помощь!
Ответ №1:
Вам не нужно использовать метод map (), так как он возвращает массив, а не один объект. Все, что вам нужно, это получить первый элемент в возвращаемом массиве, затем отформатировать и отобразить его. Что — то вроде этого:
let arrayOfQuotes = []; const data = await axios.get("https://type.fit/api/quotes"); arrayOfQuotes = data.data; if(arrayOfQuotes.length gt; 0){ const quote = ( lt;div key={arrayOfQuotes[0].id}gt; lt;h3gt;{arrayOfQuotes[0].text}lt;/h3gt; lt;pgt;{arrayOfQuotes[0].author}lt;/pgt; lt;/divgt;); setQuote(quote); } Кстати, конечная точка API, которую вы используете, возвращает список, в то время как вам нужна одна цитата. Я думаю, что должна быть другая конечная точка, которая предоставляет единственную цитату. Вам нужно проверить документы API, если они у него есть.
Комментарии:
1. Я попробовал, и он ничего не показывает. Я помещаю console.log(цитата) перед setQuote в коде, и это продолжает вращаться:
{$$typeof: Symbol(react.element), type: 'div', key: null, ref: null, props: {…}, …}2. Почему у вас есть [цитата] в вашем useEffect()? Я думаю, что замена этого на [] решит проблему с вращением. Потому что вам нужно только одно предложение для каждой загрузки страницы. верно? поэтому он не должен получать новую цитату каждый раз при изменении состояния.
3. В нем говорится, что в настоящее время параметризованные запросы не поддерживаются. Конечная точка работает без изменений.
4. Теперь он возвращает только один объект, но по-прежнему не отображает его. Вот что говорит отладчик, когда я удаляю цитату: у React Hook useEffect отсутствует зависимость: «цитата». Либо включите его, либо удалите массив зависимостей.
5. Что касается того, что объект не отображается в консоли, я думаю, что это связано с тегами, которые вы добавляете в цитату. Попробуйте зарегистрировать только цитату без каких-либо тегов. Или попробуйте отобразить его на странице вместо входа в консоль.