React Hook useEffect缺少一个依赖项："fetchProfile"。要么包含它，要么删除依赖数组 react-hooks/exhaustive-deps

Question

我收到了这个警告，我想知道需要采取什么步骤才能从控制台中删除该警告。问题是，我在其他地方使用fetchProfile((函数，所以我无法在useEffect中移动它。有什么建议吗？我的代码如下：

const fetchProfile = async () => {
const token = await localStorage.FBIdToken
await axios
.get(`/user`, {
headers: {
Authorization: `${token}`
}
})
.then(res => {
setUser(res.data)
setFormData({
...formData,
github: res.data.user.github ? res.data.user.github : '',
website: res.data.user.website ? res.data.user.website : '',
linkedIn: res.data.user.linkedIn ? res.data.user.linkedIn : '',
cohort: res.data.user.cohort,
program: res.data.user.program
})
})
.catch(err => console.log('error'))
}
useEffect(() => {
fetchProfile()
}, [])

Answer 1

将函数封装在useCallback中并将其作为依赖项添加应该可以工作，如下所示：

const fetchProfile = useCallback(async () => {
// Do request as per normal
}, [])
useEffect(fetchProfile, [fetchProfile])

另一个选项是将fetchProfile函数移到组件外部，并将setter传递给调用：

// This is defined outside your component
const fetchProfile = async ({ setUser, setFormData }) => {
// Do request as per normal
}
useEffect(() => {
fetchProfile({ setUser, setFormData })
}, [])

Answer 2

您收到警告是因为您在钩子中使用了fetchProfile，但没有将其包含在依赖项中。如果fetchProfile发生更改，则效果不会运行。

要消除警告，请将fetchProfile添加到依赖项(useEffect()的第二个参数(：

useEffect(() => {
fetchProfile()
}, [fetchProfile])