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函数移到组件的外部并将设置器传递给调用：

// 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])

React Hook useEffect缺少依赖项：'fetchProfile'。包括它或删除依赖项数组react-hooks / exhaustive-deps

2 个答案: