React Hooks react-hooks/exhaustive deps eslint规则似乎过于敏感

Question

我在完全理解linter规则react-hooks/exhaustive deps中的依赖项时遇到了麻烦。在我看来，在许多情况下，您不需要数组中的特定变量，因为您不希望在该变量发生变化时调用钩子。但是，这个内联规则将告诉您，如果它在钩子内，则依赖项中缺少它。我知道我可以禁用这一行，但我想知道我是否对规则有什么误解，以及是否有更好的方法来使用钩子编写此功能。下面是一个我觉得这条规则不需要应用的代码示例。

我有以下两个状态变量：

const [taggedUsers, setTaggedUsers] = useState([])
const [users, setUsers] = useState([])

taggedUsers表示与实体关联的用户(实体中只保存用户的邮件字符串)，而用户是从另一个接口获取的用户对象，除了用户的邮件之外，还包含更多的信息。

我有一个带有钩子的组件，它在被调用时使taggedUser对象水合，这样我就可以在页面上显示它们的名称。当我加载页面时，我点击的提供实体的端点有一个属性taggedUsers，它只是一个与实体相关联的电子邮件列表。我有一个转换器，它接收这些电子邮件，并将它们映射到一个taggedUser对象列表，如下所示：

{ email: "john.smith@gmail.com", name: null, id: "john.smith@gmail.com" }

经过水合处理后，该对象将如下所示：

{ email: "john.smith@gmail.com", name: "John Smith", id: "john.smith@gmail.com" }

我有一个端点，我可以点击它来获取用户列表，并且我使用从那里获取的数据来补充用户对象的名称。当我的组件第一次呈现时，我获取用户，并将变量" users“的状态设置为这些用户。用户的变化会触发下一个钩子：

useEffect(() => {
const hydrateTaggedUsers = () => {
  const hydratedTaggedUsers = []
  users.forEach((user) => {
    taggedUsers.forEach((taggedUser) => {
      if (user.email === taggedUser.email) hydratedTaggedUsers.push(user)
    })
  })
  setTaggedUsers(hydratedTaggedUsers)
}

if (users.length) hydrateTaggedUsers()
}, [users])

我希望这个钩子只在“用户”改变时被调用一次，也就是每次页面加载只调用一次。根据链接器设置，挂钩的依赖项中缺少taggedUsers。但是，我不希望在taggedUsers的值发生变化时调用此钩子，并将其添加为依赖项导致堆栈溢出，因为此钩子会更改taggedUsers的值。

关于钩子应该如何构建，我是不是遗漏了什么？我觉得既然我不希望在更新taggedUsers的值时调用这个钩子，它就不应该包含在依赖数组中。然而，林特仍然希望它能留在那里。在这种情况下，禁用线路是不可避免的吗？

Answer 1

尝试一些东西..

你有完整的代码好让我更深入的检查吗？

我建议这样做，但不确定它是否有效:)

useEffect(() => {
 if (users.length) {
   const hydratedTaggedUsers = [];
   users.forEach(user => {
     taggedUsers.forEach(taggedUser => {
       if (user.email === taggedUser.email) hydratedTaggedUsers.push(user);
     });
   });
   setTaggedUsers(hydratedTaggedUsers);
 }
}, [users]);