Как подавить линтинг допустимых экземпляров useEffect?

Это действительный useEffect код:

  useEffect(() => {
    if (state.companyId !== undefined && state.companyId === -1) {
      return;
    }

    if (accessNotesRef.current) {
      accessNotesRef.current.focus();
    }

    if (vinRef.current) {
      vinRef.current.focus();
    }
  }, []);

Что касается зависимостей, я сознательно хочу, чтобы он запускался только один раз при загрузке, поэтому []. Но линтер жалуется:

В React Hook useEffect отсутствуют зависимости: 'emailRef', 'lastNameRef' и 'state.companyId'. Либо включите их, либо удалите массив зависимостей react-hooks / excustive-deps

Итак, мы имеем дело с ложным срабатыванием. Есть ли способ подавить это?


reactjs use-effect linter
person robertwerner_sf    schedule 22.11.2019    source источник
comment
У большинства линтеров есть способ подавления предупреждений / ошибок отдельных строк. Посмотрите документацию по используемому линтеру.   -  person Kevin B    schedule 22.11.2019
comment
Какой линтер вы используете? Это очень конкретный вопрос, а не общий.   -  person Raul Rene    schedule 22.11.2019
comment
@RaulRene: Извините за это! В VSCode на Mac я использую ESLint и FlowLanguageSupport. Но это не те, которые выводят сообщения в моем сеансе терминала, не так ли? Я предполагал, что сообщения пришли из какого-то пакета, используемого npm start.   -  person robertwerner_sf    schedule 23.11.2019

Ответы (1)


arrow_upward
0
arrow_downward

Согласно вашей логике useEffect и в зависимости от того, как вы инициализировали свой state, вы должны сделать что-то вроде этого:

/*
Example for handling the on mount
initialization through props or `useState`
*/
const App = props => {
  const [state] = useState(DEFAULT_INITIAL);
  const companyRef = useRef(props.DEFAULT_INITIAL);
  const myRef = useRef();

  useEffect(() => {
    if (
      companyRef.current.companyId &&
      DEFAULT_INITIAL.companyId &&
      DEFAULT_INITIAL.companyId !== -1 &&
      myRef.current
    ) {
      myRef.current.focus();
    }
  }, []);

  return <></>;
};

Это потому, что проверка вашего состояния "при монтировании"

useEffect(() => {
  if (state.companyId !== undefined && state.companyId === -1) {
    return;
  }
}, [])

эквивалентно проверке начального значения useState или с использованием ссылки при инициализации вашего состояния с помощью свойств.

И ссылка, инициализированная с помощью useRef, не обязательно должна быть в массиве dep, поскольку существует только один их экземпляр на время жизни компонента.

Изменить Q-58999058-useEffectExample

См. FAQ по React:

Безопасно ли исключать функции из списка зависимостей? Вообще говоря, нет.

Если вы на 200% уверены, что линтер неправильный, React все равно предлагает вам исправить это.

Если вы все еще занимаетесь этим, вы можете просто отключить линт следующим образом:

useEffect(() => {
  if (state.companyId !== undefined && state.companyId === -1) {
    return;
  }
// eslint-disable-next-line
}, [])
person Dennis Vash    schedule 22.11.2019
comment
Я ценю ваш умный способ использования ссылок для удаления предупреждений о зависимостях, но я не вижу, что в моем подходе есть что-то принципиально неправильное. Основная проблема здесь в том, что линтер выдает ложное срабатывание предупреждения о пустом массиве зависимостей. И пустой массив зависимостей должен быть полностью допустимым с useEffect. - person robertwerner_sf; 23.11.2019
comment
Я добавил FAQ из реактивных документов, вы можете отключить его, если уверены в этом, что, я считаю, настоятельно не рекомендуется. - person Dennis Vash; 23.11.2019