Как использовать UseEffect () Hook для получения состояния из Redux - PullRequest
Новая
       16

Как использовать UseEffect () Hook для получения состояния из Redux

0 голосов
/ 16 мая 2019

Я пытаюсь использовать ловушку React useEffect () для доступа к состоянию из Redux, чтобы автоматически заполнять поля формы.Я вызываю действие getCurrentProfile (), которое возвращает объект с именем profile.

Однако в консоли я получаю сообщение об ошибке, в котором говорится, что у меня отсутствуют зависимости для полей формы, которые я пытаюсь обновить с помощью состояния,

Я пробовал следующие элементы:

1) Добавьте каждую зависимость, указанную в сообщении об ошибке.Это избавляет от сообщения об ошибке, но useEffect () будет продолжать работать.Я вижу это, потому что мой Devux-сервер Redux показывает, что мое действие постоянно вызывается.

2) Я пытался использовать хук setState () вне useEffect (), но я получаю сообщение об ошибке, так как мое действие Redux вызываетсяпосле того, как компонент покрашен.

3) Я все еще новичок в React, и я потратил часы, пытаясь понять это.Ранее я использовал getDerivedStateFromProps для решения этой проблемы, когда использовал компоненты класса.

Любые советы будут с благодарностью.Или, если вы могли бы указать мне на соответствующий ресурс, это тоже будет здорово.Спасибо! 

  useEffect(() => {
    getCurrentProfile();

    setFormData({
      company: loading || !profile.company ? '' : profile.company,
      website: loading || !profile.website ? '' : profile.website,
      location: loading || !profile.location ? '' : profile.location,
      status: loading || !profile.status ? '' : profile.status,
      skills: loading || !profile.skills ? '' : profile.skills.join(','),
      bio: loading || !profile.bio ? '' : profile.bio,
      githubusername:
        loading || !profile.githubusername ? '' : profile.githubusername,
      youtube: loading || !profile.social ? '' : profile.social.youtube,
      twitter: loading || !profile.social ? '' : profile.social.twitter,
      linkedin: loading || !profile.social ? '' : profile.social.linkedin,
      instagram: loading || !profile.social ? '' : profile.social.instagram,
      facebook: loading || !profile.social ? '' : profile.social.facebook
    });
  }, [loading, getCurrentProfile]);

Вот сообщение об ошибке. 

React Hook useEffect has missing dependencies: 'profile.bio',
'profile.company', 'profile.githubusername', 'profile.location',
'profile.skills', 'profile.social', 'profile.status', and
'profile.website'. Either include them or remove the dependency array.
If 'setFormData' needs the current value of 'profile.company', you can
also switch to useReducer instead of useState and read
'profile.company' in the reducer  react-hooks/exhaustive-deps

1 Ответ

0 голосов
/ 24 мая 2019

Я знаю, что это из devconnector 2 Брэда Траверса! Исправление здесь заключается в добавлении этих аргументов в массив эффекта использования в конце, например:

`useEffect (() => { getCurrentProfile (); 

setFormData({
  company: loading || !profile.company ? '' : profile.company,
  website: loading || !profile.website ? '' : profile.website,
  location: loading || !profile.location ? '' : profile.location,
  status: loading || !profile.status ? '' : profile.status,
  skills: loading || !profile.skills ? '' : profile.skills.join(','),
  githubusername:
    loading || !profile.githubusername ? '' : profile.githubusername,
  bio: loading || !profile.bio ? '' : profile.bio,
  twitter: loading || !profile.social ? '' : profile.social.twitter,
  facebook: loading || !profile.social ? '' : profile.social.facebook,
  linkedin: loading || !profile.social ? '' : profile.social.linkedin,
  youtube: loading || !profile.social ? '' : profile.social.youtube,
  instagram: loading || !profile.social ? '' : profile.social.instagram
});},[loading, getCurrentProfile, profile.bio, profile.company, profile.githubusername, profile.location, profile.skills, profile.social, profile.status, profile.website]); `
...