使用 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')
})

我尝试使用 [] 作为依赖数组，但我收到一个 linting 错误，提示将 initializeAccount 移动到依赖数组。如果我添加它，该函数将无限运行。

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

Answer 1

伙计，为了对 api 调用运行一次 useEffect，你必须这样做：

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

希望对你有帮助。