@lucidiusss

UseEffect вызывается дважды. Как починить?

Есть такой код, при console.log выдает сначала undefined а затем уже объект. Стриктмод выключен, стоит браузерроутер. В чем проблема?

import React, { useEffect, useState } from 'react'
import Header from '../components/Header'
import Sidebar from '../components/Sidebar/Sidebar'
import axios from 'axios'
import options from '../api/api.js'

const Home = () => {

  const [tracks, setTracks] = useState([]);

  const track = tracks[Math.floor(Math.random() * tracks.length)];


  useEffect(() => {
    axios.request(options).then((response) => {
      setTracks(response.data.tracks)
    }).catch((err) => {
      console.log(err);
    });
  }, []);

  console.log(track);

  return (
    <div className="w-screen h-screen relative">
      <div className="absolute artist" />
      <Header/>
      <Sidebar/>
      <div className="absolute left-[300px] w-[160px] h-[340px] flex flex-col items-center text-white">
        <p className="text-base"></p>
        <h2></h2>
      </div>
    </div>
  )
}

export default Home

bEjSlCm
  • Вопрос задан
  • 83 просмотра
Решения вопроса 1
Alexandroppolus
@Alexandroppolus
кодир
Тут нет проблемы, это Реакт так работает. На первом рендере у тебя пустой массив, потом придет ответ на запрос, поставит массив, и компонент перерендерится.

Как вариант, можно получать track где-то снаружи, передавать в Home в пропсах и рендерить Home, если треки загружены (если массив не пустой)
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@Alexander3928
Зайди в файл index.js проекта и убери <React.StrictMode>.

<React.StrictMode>
   <App />
</<React.StrictMode>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы