React useEffect无限循环原因

Question

有人可以解释一下为什么我的代码 useEffect() 陷入无限循环吗？我正在练习 React 并实现了一个用户个人资料页面。当我将图片上传到firebase时，会触发无限循环，我的思考过程是，当我上传图片时，coverUrl会更改为图片的url，在useEffect内部，如果我看到封面发生变化，我会更新我的userData和数据库价值与上传的图片。

Globalconfig 保存一些状态变量，这些变量在登录期间（在不同的页面中）被填充，我在此页面中使用它，但等待它首先加载

const ProPicAndCover = () => {
const Globalconfig = useContext(ConfigContext)
const [coverUrl, setCoverUrl] = useState('')
const [isReady, setIsReady] = useState(false)

useEffect(() => {
    // Wait for data to load
    if(Globalconfig.userData !== ""){
        setIsReady(true)
    }

    if (coverUrl !== "") { 
        update(ref(getDatabase(),'users/' + Globalconfig.userData.UID), {cover_picture_url: coverUrl})
        getUserInfo(Globalconfig.UID, getDatabase(), Globalconfig.setUserData)
    }
},[Globalconfig.userData])

if (isReady) { 
    return(
        <div id="ProPicAndCoverContainer">  
            <Container>
                <input type="file" id="coverPhoto" hidden onChange={() => {
                    const file = document.getElementById("coverPhoto").files[0]
                    uploadImageAndgetUrl(getStorage(), file, Globalconfig.UID, setCoverUrl)
                    console.log(coverUrl)
                }}></input>
                
                {/* Code block to display if the user doo't have a cover photo */}
                <div id="coverPic" style={{display: Globalconfig.userData.cover_picture_url === '' ? 'block' : 'none'}}>
                    <div id="coverText" onClick={() => {
                        document.getElementById("coverPhoto").click()
                    }}>
                        <h2>Selct a cover photo</h2>
                        <FaUpload/>
                    </div>
                </div>

                {/* Code block to display if the user have a cover photo */}
                <img src={Globalconfig.userData.cover_picture_url} id="coverPic" style={{display: Globalconfig.userData.cover_picture_url === '' ? 'none' : 'block'}}></img>

                {/*Profile Picture*/}
                <img src={Globalconfig.userData.profile_picture} id="userProfilePicture"></img>
                <h2 id="username">{Globalconfig.userData.first_name} {Globalconfig.userData.last_name}</h2>
                
                {/* User Bio */}
                <InputEditFirebase editIcon={<AiOutlineEdit/>} fireBaseObjKey="bio" fireBasePathToUpdate={"users/"+Globalconfig.userData.UID} id="bio" textValue={Globalconfig.userData.bio} inputText={"Click to add bio"} uid={Globalconfig.userData.UID}>"{Globalconfig.userData.bio}"</InputEditFirebase>
            </Container>
        </div>
    )
}
else {
    return(
        <div className="loader">
            <div className="lds-circle"><div></div></div>
        </div>
    )
}
}

Answer 1

React useEffect 导致无限循环，因为您已将 userData 作为 useEffect 中的依赖项，并且您还在 useEffect 中更改了 userData 的值。通过解决这个问题可能会解决我们的问题。