即使依赖项没有改变，为什么 useEffect 会在页面重新加载时触发？

问题描述

我的一个 React 组件中有这个 useEffect。

const [photo,setPhoto]=useState();

useEffect(()=>{
    console.log("inside photo useEffect")
    setIsLoading(true);

    fetch("/uploadPhoto",{
        method:"post",body:photo
    })
    .then(res=>res.json())
    .then(data=>{
        setPhotoURL(data.secure_url);
        setIsLoading(false)
    })
    .catch(err=>{
        console.log(err);
    })
},[photo])

我只想在“photo”的值改变时触发这个useEffect。但是每当页面重新加载时它就会被触发。

如何实现这一目标？

解决方法

我找到了一种方法来做到这一点。 似乎 useEffect 默认在每个渲染上执行，而与依赖无关。我们使用依赖项作为第二个参数来定义何时应该再次执行 useEffect。

我像这样更改了我的代码并且它起作用了。

useEffect(()=>{
    if(photo){ 
        console.log("inside photo useeffect")
        setIsLoading(true);
        

        fetch("/uploadPhoto",{
            method:"post",body:photo
        })
        .then(res=>res.json())
        .then(data=>{
            setPhotoURL(data.secure_url);
            setIsLoading(false)
        })
        .catch(err=>{
            console.log(err);
        })
    }
},[photo])

仅当“photo”有值时才会执行。