React Hooks реагирует на ловушку / правило исчерпывающего проникновения кажется чрезмерно чувствительным

Question

У меня возникли проблемы с полным пониманием зависимостей в правиле линтера реакции-хуки / исчерпывающее-deps. Мне кажется, что во многих ситуациях вам не нужно указывать переменную c в массиве, потому что вы не хотите, чтобы хук вызывался при изменении этой переменной. Тем не менее, это правило связывания скажет вам, что оно отсутствует в зависимостях, если оно находится внутри ловушки. Я понимаю, что могу отключить строку, но мне интересно, есть ли что-то, что я неправильно понимаю в правиле, и есть ли лучший способ кодирования этой функциональности с использованием хуков. Вот пример кода, который я считаю, что это правило не нужно применять.

У меня есть следующие две переменные состояния:

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

taggedUsers представляют пользователей, связанных с сущностью (из которой сохраняются только строки писем пользователей), тогда как пользователи пользовательские объекты, извлеченные из другого API, которые имеют больше информации, чем просто электронные письма пользователей.

У меня есть компонент с крючком, который гидратирует объекты 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]);