如何使用useeffect()挂钩从redux获取状态

Question

我正在尝试使用react的useeffect((挂钩从redux访问状态，以自动填写我的表单字段。我正在调用getCurrentProfile((操作，该操作返回一个称为配置文件的对象。

但是，我正在控制台中收到一条错误消息，说我缺少试图使用状态更新的表单字段的依赖关系。

我尝试了以下项目：

1(添加错误消息中列出的每个依赖关系。这会摆脱错误消息，但是usefeffect((将不断发射。我可以看到这一点，因为我的redux devtools显示了我的动作始终被称为。

2(我尝试使用setState((usefeft((之外使用setState((挂钩，但是由于绘制了组件后我的redux操作被调用。

。

3(我仍然是反应的新手，我已经花了几个小时来弄清楚这一点。我以前使用getDerivedStateStateFromprops在使用类组件时解决了此问题。

任何提示都将不胜感激。或者，如果您可以指出适当的资源，那也很棒。谢谢！

  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

Answer 1

我知道这是来自brad traversy！的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]); `