useState 被执行，即使依赖关系没有改变

Question

我必须在状态更改时获取 API，我使用 useEffect 添加这样的依赖项

const [ activeLottery, setActiveLottery ] = useState();
useEffect(() => {
    console.log('fetching')
}, [activeLottery])
return (
    <div className="container">
        <Carousel 
            lotteries={ lotteries } 
            isLoading={ isLoading }
            slideClick={ setActiveLottery }
        />
    </div>
);

组件轮播有一个 onClick 函数，它改变了 activeLottery 并且它正常工作，因为状态发生了变化。但是它会在渲染组件时执行提取。 activeLottery 改变时不应该这样做吗？

如有任何提示，我们将不胜感激。

谢谢

Answer 1

默认情况下，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])

此外，您可以查看这个很棒的 Whosebug 答案：

以及 Dan Abramov 的这篇文章：https://overreacted.io/a-complete-guide-to-useeffect/

useState 被执行，即使依赖关系没有改变

useState is executed even dependency doesn't change

reactjs

use-effect