React, ESLint: eslint-plugin-Reaction-hooks показывает некорректную «отсутствующую зависимость» - PullRequest
Новая
       24

React, ESLint: eslint-plugin-Reaction-hooks показывает некорректную «отсутствующую зависимость»

1 голос
/ 21 сентября 2019

Предположим, что вы используете React и пишете пользовательский хук useSomething, который возвращает одинаковую вещь при каждом вызове для одного и того же компонента. 

const something = useSomething()

// useSomething() at time X  === useSomething() at time Y

Если вы сейчас используете это something значение внутри useEffect(() => ...) и вы не передаете something как зависимость от массива второго аргумента useEffect, тогда линтер предупредит вас:

React Hook useEffect hasотсутствует зависимость: «что-то».Либо включите его, либо удалите массив зависимостей.(response-hooks / исчерпывающе-deps)

Конечно, ESLint не может знать, что something всегда будет оставаться идентичным (для компонента), но добавляя неизменяемые вещи, такие как something, в массив зависимостейuseEffect каждый раз, когда они используются, действительно раздражает.Простая деактивация react-hooks/exhaustive-deps также не кажется хорошим решением (равно как и использование // eslint-disable-next-line react-hooks/exhaustive-deps).

Есть ли лучшее решение, чем ненужное добавление подобных вещей в массив зависимостей useEffect только дляосчастливить линтера?

Пожалуйста, найдите простую демонстрацию здесь: https://codesandbox.io/s/sad-kowalevski-yfxcn [Редактировать: Пожалуйста, имейте в виду, что проблема заключается в общем шаблоне, описанном выше, а не в этой глупой маленькой демонстрации - целиэтой демонстрации просто показать предупреждение ESLint, ничего больше]

[Редактировать] Пожалуйста, найдите дополнительную демонстрацию здесь: https://codesandbox.io/s/vibrant-tree-0cyn1

Ответы [ 2 ]

2 голосов
/ 21 сентября 2019

Здесь

https://github.com/facebook/react/issues/14920#issuecomment-471070149

Например, вы можете прочитать это:

Если оно действительно постоянное, то указание его в deps не повредит.Например, случай, когда функция setState внутри пользовательского хука возвращается вашему компоненту, а затем вы вызываете его из эффекта.Правило Линт не достаточно умен, чтобы понять, как это происходит.Но с другой стороны, любой может обернуть этот обратный вызов позже, прежде чем вернуться, и, возможно, сослаться на другую опору или состояние внутри него.Тогда это не будет постоянным!И если вы не справитесь с этими изменениями, у вас будут неприятные устаревшие ошибки проп / состояния.Так что указав это лучше по умолчанию.

Так что, возможно, просто добавление этих неизменяемых значений в массив зависимостей useEffect может быть лучшим решением.Тем не менее, я надеялся, что будет что-то похожее на конфигурацию ESLint реагировать на ловушки, чтобы определить список имен ловушек, возвращаемые значения которых следует рассматривать как статические.

0 голосов
/ 21 сентября 2019

Пример немного надуманный, но я подозреваю, что вы, возможно, захотите создать новый блок useEffect без этой зависимости.

Если магазин не меняется, хотя я бы спросил, почему вы хотитеконсоль лог это время.Если вы хотите регистрировать это только при изменении, вы добавите someStore в ваш массив зависимостей.Это действительно зависит от того, чего вы пытаетесь достичь, и от вашего разделения интересов.

Я бы сказал, что если someStore используется как часть какой-либо логики, обрабатываемой в этом эффекте, то действительно принадлежит вашему массиву зависимостей.

Вы также можете переместить const something = useSomething() в свой эффект и извлечь его как пользовательский хук ссылка 

useEffect(() => {
    console.log("Current state (may change)", someState);

  }, [someState]); 

useEffect(() => {
    console.log("Current store (will never change)", someStore);
  });
...