Правильный массив зависимостей для useEffect с хуками React

Я использую Create-React-App и (отлично) https://github.com/alex-cory/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 в этом сценарии?


person Toby    schedule 23.09.2019    source источник
comment
Не уверен, будет ли useFetch каждый раз возвращать одну и ту же ссылку, но вы можете попробовать следующее: const initializeAccount = useCallback(async () => {,,,},[request]); И передать initializeAccount в useEffect.   -  person HMR    schedule 23.09.2019


Ответы (1)


Мой друг, чтобы один раз запустить useEffect для вызовов api, вы должны сделать это так:

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

Надеюсь, это поможет.

person vitomadio    schedule 23.09.2019
comment
Если я сделаю это, я получаю сообщение об ошибке линтинга, в котором говорится о добавлении зависимости к массиву - означает ли это, что ошибка линтинга неверна? Кроме того, что я должен вернуть в useEffect, чтобы прервать вызовы выборки? - person Toby; 23.09.2019
comment
@Toby, который есть в документации request.abort() - person HMR; 23.09.2019
comment
@HMR Я читал это, но я не был уверен, как это сделать - я попробую, спасибо. - person Toby; 23.09.2019
comment
@Toby это правило lint все еще довольно новое и очень грубое, просто добавьте переопределение lint для строки. Я также рекомендую оставить комментарий выше, что что касается причины переопределения, только крюк для стрельбы на монтировке является вполне законной причиной. Я считаю, что авторы eslinter react-hooks изучают более детальный контроль / правила, возможно, просто нужно немного подождать. - person Drew Reese; 23.09.2019
comment
@DrewReese. Мне было интересно, так ли это, поскольку пустой массив зависимостей действительно работает, но я не хотел игнорировать и вызывать проблемы в дальнейшем. Спасибо! - person Toby; 23.09.2019
comment
Вот почему я добавил немного о том, чтобы оставить комментарий. Я усиленно давил на крючки в своей команде на работе, а потом нашел линтер хуков, поэтому мне пришлось не только научить команду правильному использованию крючков, но и правильному управлению правилами линтинга. Это может запутаться с автоматическими форматерами, которые также пытаются автоматически исправить предупреждения о линтах, что является причиной необходимости переопределения, и комментарий помогает объяснить другим разработчикам почему переопределение, что определенно сделано специально . - person Drew Reese; 23.09.2019