Question

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

但是，我在控制台中收到一条错误消息，提示我缺少要使用状态更新的表单字段的依赖项。

我尝试了以下项目：

1）添加错误消息中列出的每个依赖项。这摆脱了错误消息，但是useEffect（）将继续触发。我可以看到这是因为我的Redux devtools显示了我的操作一直被调用。

2）我曾尝试在useEffect（）之外使用setState（）钩子，但由于在绘制完组件后调用了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

Answer 1

我知道这是来自布拉德遍历的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]); `

如何使用UseEffect（）挂钩从Redux获取状态

1 个答案: