为什么 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();

希望这可以帮助！