почему useEffect выполняется после каждого рендера?

Question

У меня проблемы с крючком эффекта. Я только хочу сделать это один раз. если я передаю album.length или пустой массив, он возвращает пустой объект. Если альбом добавлен как зависимость, то эффект отображается как бесконечный цикл. любая помощь приветствуется.

const [album, setAlbum] = React.useState(initialState)
const {state} = React.useContext(AuthContext);


async function fetchData(){
 try{
  const res =await axios.get('http://localhost:5000/api/albums/all')
  const {data}= await res;
  setAlbum({...data,albums:res.data})
  console.log(album)
  }
  catch(err){
  console.log(err);
  }
}



 useEffect(() => {fetchData();}, []);


_______________________________________________________

componentDidMount(){
  axios.get('http://localhost:5000/api/albums/all')
.then(res=>{
    let albums=res.data.map((album)=>{
      return(
        <div key={album._id}>
       //display the album
          </div>
         </div>
        </div>
       )
       })
this.setState({albums:albums});

})}

Answer 1

const res =await axios.get('http://localhost:5000/api/albums/all')
const {data}= await res;
setAlbum({...data,albums:res.data})

Не могли бы вы объяснить это? Зачем ждать разрешения и зачем распространять данные и добавлять их как альбомы?

Вы можете написать свой собственный хук. Вы также должны объявить функцию fetchApi в хуке useEffect, поэтому она рендерится все время.

Давайте возьмем ваш код и создадим пользовательский хук

import axios from 'axios';
import React, { useEffect, useState } from 'react';

function useAlbums() {
  const [albums, setAlbums] = useState([]);
  useEffect(() => {
    const fetchData = async () => {
      try {
        const { data } = await axios.get(
          'http://localhost:5000/api/albums/all',
        );
        setAlbums(data);
        console.log(albums);
      } catch (err) {
        console.log(err);
      }
    };
    fetchData();
  }, [albums]);

  return [albums, setAlbums];
}

const Component = () => {
  // use it in component
  const [albums] = useAlbums();

  return (
    <>
      {albums.map(({ _id }) => (
        <div key={_id}>{'add more content here'}</div>
      ))}
    </>
  );
};

Использованиес

const [albums, setAlbums] = useAlbums();

Надеюсь, это поможет!