為什么每次渲染后都會執行useEffect？

Question

我的效果掛鈎有問題。 我只希望它渲染一次。 如果我傳遞album.length 或一個空數組，它會返回一個空的object。 如果將專輯作為依賴項添加，則效果將呈現為無限循環。 任何幫助表示贊賞。

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})

你能解釋一下嗎？ 為什么要等待 res 以及為什么傳播數據並將其添加為專輯？

你可以編寫自己的鈎子。 您還應該在 useEffect 掛鈎中聲明 function fetchApi ，這就是它一直重新渲染的原因。

讓我們使用您的代碼並制作一個自定義鈎子

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();

希望這可以幫助！

Answer 2

效果總是在瀏覽器完成繪制后運行（除了useLayoutEffect ）。 獲取數據（將被序列化為state ）不可避免地會觸發額外的render

const [data, setData] = useState(null)

useEffect(() =>{
    fetchAPI().then(res => setData(res))
},[])//Will run after the first render and trigger another one