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

Question

我无法完全理解 linter 规则react-hooks/exhaustive-deps 中的依赖关系。在我看来，在许多情况下，您不需要数组中的特定变量，因为您不希望在该变量更改时调用 Hook 。但是，此 linting 规则会告诉您，如果它位于钩子(Hook)内部，则依赖项中缺少它。我知道我可以禁用该行，但我想知道我是否对该规则有误解，以及是否有更好的方法使用钩子(Hook)来编码此功能。这是我认为不需要应用此规则的代码示例。

我有以下两个状态变量:

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

taggedUsers 表示与实体关联的用户(其中​​仅保存用户的电子邮件字符串)，而用户是从另一个 api 获取的用户对象，它包含的信息不仅仅是用户的电子邮件。

我有一个带有钩子(Hook)的组件，可以在调用时水化 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" }

我有一个端点，可以点击该端点来获取用户列表，并使用从那里获取的数据来合并用户对象的名称。当我的组件首次呈现时，我获取用户，并将变量“用户”的状态设置为这些用户。用户的变化然后触发下一个钩子(Hook):

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])

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

关于如何构建钩子(Hook)，我是否缺少一些东西？我觉得，由于我不希望在更新 taggedUsers 的值时调用此钩子(Hook)，因此它不应包含在依赖项数组中。然而，linter 仍然希望它在那里。在这种情况下，禁用线路是不可避免的吗？

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]);