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

您能解释一下吗？为什么要等待资源，为什么还要传播数据并将其添加为相册？

您可以编写自己的钩子。您还应该在useEffect挂钩中声明函数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();

希望这会有所帮助！

为什么useEffect在每次渲染后执行？

1 个答案: