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')
},[])

希望有帮助。

正确的依赖数组使用带有React钩子的useEffect

1 个答案: