使用 React 钩子更正 useEffect 的依赖数组

Question

我正在使用 Create-React-App and the (excellent) 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(() => {
   initializeAccount()
   return () => console.log('unmount')
},[])

希望对您有所帮助。

使用 React 钩子更正 useEffect 的依赖数组

Correct dependency array for useEffect with React hooks

fetch

reactjs

react-hooks

use-effect