即使依赖关系没有改变，useState 也会被执行答案

【问题标题】：useState is executed even dependency doesn't change即使依赖关系没有改变，useState 也会被执行
【发布时间】：2021-12-31 12:58:26
【问题描述】：

当状态改变时我必须获取一个 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变化时不应该这样做吗？

任何提示将不胜感激。

谢谢

【问题讨论】：

useEffect 在组件渲染时首先运行，然后每次依赖数组中的任何内容发生变化时运行
这能回答你的问题吗？ Make React useEffect hook not run on initial render
是的！最后我添加了一个条件检查activeLottery，与下面的答案相同

标签： reactjs use-effect

【解决方案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])

此外，您可以查看这个很棒的 StackOverflow 答案：https://stackoverflow.com/a/59841947/16420018

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

【讨论】：

太棒了！最后，我添加了条件，只是检查是否还填充了 activeLottery。非常感谢！