當狀態發生變化時，我必須獲取 API，我使用 useEffect 添加了這樣的依賴項
const [ activeLottery, setActiveLottery ] = useState();
useEffect(() => {
console.log('fetching')
}, [activeLottery])
return (
<div className="container">
<Carousel
lotteries={ lotteries }
isLoading={ isLoading }
slideClick={ setActiveLottery }
/>
</div>
);
Component Carousel 有一個 onClick 函式，它可以改變 activeLottery 并且它可以正常作業，因為狀態發生了變化。但它會在組件呈現時執行 fetch。當activeLottery發生變化時不應該這樣做嗎？
任何提示將不勝感激。
謝謝
uj5u.com熱心網友回復：
默認情況下，useEffect始終在第一次渲染之后運行。
useEffect 中的依賴陣列允許您指定觸發它的條件。如果你為 useEffect 提供一個空的依賴陣列，它只會運行一次。
如果您想在activeLottery更改時進行 API 呼叫，請在useEffect.
useEffect(() => {
if(activeLottery?.length){ // if activeLottery is array then you can check it's length
// Your API call goes here
}
console.log('fetching')
}, [activeLottery])
此外，您可以查看這個很棒的 StackOverflow 答案：https ://stackoverflow.com/a/59841947/16420018
以及 Dan Abramov 的這篇文章：https : //overreacted.io/a-complete-guide-to-useeffect/
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/362503.html
上一篇：初始化狀態迭代物件陣列