Javascript 为什么每次渲染后都要执行useEffect？

我的效果挂钩有问题。我只想渲染一次。如果我传递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});

const[album，setAlbum]=React.useState（initialState）
const{state}=React.useContext（AuthContext）；
异步函数fetchData（）{
试一试{
const res=等待axios.get（'http://localhost:5000/api/albums/all')
const{data}=wait res；
setAlbum（{…数据，albums:res.data}）
console.log（相册）
}
捕捉（错误）{
控制台日志（err）；
}
}
useffect（（）=>{fetchData（）；}，[]）；
_______________________________________________________
componentDidMount（）{
axios.get（）http://localhost:5000/api/albums/all')
。然后（res=>{
让相册=res.data.map（（相册）=>{
返回(
//显示相册
)
})
this.setState（{albums:albums}）；

}) }

const res=wait axios.get（'http://localhost:5000/api/albums/all')
const{data}=wait res；
setAlbum（{…数据，albums:res.data}）

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

你可以自己写钩子。您还应该在useffect钩子中声明函数

fetchApi

，这就是为什么它会一直重新呈现

让我们用你的代码做一个定制的钩子

从“axios”导入axios；
从“React”导入React，{useffect，useState}；
函数useAlbums（）{
const[albums，setAlbums]=useState（[]）；
useffect（（）=>{
const fetchData=async（）=>{
试一试{
const{data}=wait axios.get(
'http://localhost:5000/api/albums/all',
);
设置相册（数据）；
控制台日志（相册）；
}捕捉（错误）{
控制台日志（err）；
}
};
fetchData（）；
}，[专辑]；
返回[albums，setAlbums]；
}
常量组件=（）=>{
//在组件中使用它
const[albums]=使用albums（）；
返回(
{albums.map（{u id}）=>(
{‘在此处添加更多内容’}
))}
);
};

配合使用

const[albums，setAlbums]=useAbums（）；

---

希望这有帮助

请不要发布指向文本图像的链接，只发布文本即可。或文本图像；我有一个类组件，正在使用componentdidmount，它工作得很好。我开始将组件重构为功能性组件，因为我需要将状态传递给组件。我用生命周期方法编辑了op，如果有帮助的话@您仍然需要将fetchData函数声明移动到useffect中hook@Shirley我更新了我的答案以反映您的更新，这有帮助吗？非常感谢。“我一整天都在碰壁。”雪莉很高兴我能帮上忙