具有React挂钩的useEffect的正确依赖项数组

Question

我正在使用Create-React-App和(出色的) use-http来实现自定义的useFetch挂钩。目标是在登录到帐户区时进行多次API调用：

const [user, setUser] = useState(null)
const [profile, setProfile] = useState(null)
const [posts, setPosts] = useState(null)

const request = useFetch('/')

const initializeAccount = async () => {
  try {
    const user = await request.get('api/user/')
    const profile = await request.get('api/profile/')
    const posts = await request.get('api/posts/')
    if (user) {
      setUser(user.data)
    }
    if (profile) {
      setProfile(profile.data)
    }
    if (posts) {
      setPosts(posts.data)
    }
  } catch (e) {
    console.log('could not initialize account')
  }
}

useEffect(() => {
  initializeAccount()
  return () => console.log('unmount')
})

我尝试使用[]作为依赖数组，但我得到了一个提示将initializeAccount移到依赖数组的内联错误。如果我添加它，函数就会无休止地运行。

设置依赖数组以便此函数被调用一次的正确方法是什么？另外，在这种情况下，处理每个API调用中止的正确方法是什么？

Answer 1

我的朋友，为了对api调用运行一次useEffect，你必须这样做：

useEffect(() => {
   initializeAccount()
   return () => console.log('unmount')
},[])

希望能有所帮助。