已解決430363個問題，去搜搜看，總會有你想問的

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

首頁猿問為什么 useEffect...

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

JavaScript

Cats萌萌 2021-12-12 10:06:30

我的效果掛鉤有問題。我只希望它渲染一次。如果我傳遞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});}) }

查看完整描述

1 回答

慕運維8079593

TA貢獻1876條經驗獲得超5個贊

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

希望這可以幫助！

反對回復 2021-12-12

1 回答
0 關注
402 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

為什么 useEffect 在每次渲染后執行？

為什么 useEffect 在每次渲染后執行？

1 回答

添加回答

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

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