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

Question

[lucidiusss]

Есть такой код, при 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

Answer 1

[Alexandroppolus]

Тут нет проблемы, это Реакт так работает. На первом рендере у тебя пустой массив, потом придет ответ на запрос, поставит массив, и компонент перерендерится.

Как вариант, можно получать track где-то снаружи, передавать в Home в пропсах и рендерить Home, если треки загружены (если массив не пустой)

Comments

[lucidiusss]

Спасибо, попробую.

[lucidiusss]

Через App передал в Home track, и указал в h2 {track.name}
Страница после перезагрузки выдает ошибки, потому что сначала {track.name} равен undefined, а дальше уже не идет

[lucidiusss]

App.js

import React, { useEffect, useState } from 'react';
import axios from 'axios'
import './index.css'
import Home from './pages/Home'
import options from './api/api'

function App() {


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

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

  useEffect(() => {

    axios.request(options).then((response) => {
      setTracks(response.data.tracks)
    });

  }, []);

  console.log(track)


  return (
    <>
      <Home track={track} />
    </>
  )
}

export default App

Home.jsx

import React from 'react'
import Header from '../components/Header'
import Sidebar from '../components/Sidebar/Sidebar'


const Home = ({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</p>
        <h2>{track.name}</h2>
      </div>
    </div>
  )
}

export default Home

[lucidiusss]

упс, не дочитал решение

Answer 2

[Alexander3928]

Зайди в файл index.js проекта и убери <React.StrictMode>.

<React.StrictMode>
   <App />
</<React.StrictMode>

Comments

[lucidiusss]

Написал что выключен...