React: eslint-plugin-react-hooks: ошибка «Хук вызывается условно» вне условия

Созданный на 19 сент. 2019 · 4Комментарии · Источник: facebook/react

Вы хотите запросить функцию или сообщить об ошибке ?

ОШИБКА (возможно)

Каково текущее поведение?

Плагин показывает эту ошибку:

React Hook useState вызывается условно. React Hooks должны вызываться в одном и том же порядке при рендеринге каждого компонента. Вы случайно позвонили в React Hook после досрочного возвращения? (перехватчики реакции / перехватчики правил) eslint

Но не думаю, что условно называю какие-то крючки.

Код:

https://codesandbox.io/s/exciting-bhabha-mqj7q

function App(props) {
  const someObject = { propA: true, propB: false };

  for (const propName in someObject) {
    if (propName === true) {
      console.log("something");
    } else {
      console.log("whatever");
    }
  }

  // THE PLUGIN ERROR MSG ON THIS useState
  const [myState, setMyState] = useState(null);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

Какое поведение ожидается?

В этой ситуации плагин не будет отображать ошибку.

Какие версии React и какой браузер / ОС подвержены этой проблеме?

ESLint Rules Bug

Источник

cbdeveloper

Самый полезный комментарий

Объединено https://github.com/facebook/react/pull/16853.

gaearon 25 февр. 2020

❤2

Все 4 Комментарий

Я заметил, что для этого конкретного примера:

pathsFromStartToEnd равно 3
allPathsFromStartToEnd равно 2

также possiblyHasEarlyReturn равно true

Об этой конкретной ошибке сообщается, когда pathsFromStartToEnd и allPathsFromStartToEnd равны.

См. Строку 404

Если вы выделите код внутри цикла for..in в отдельную функцию, ошибка lint исчезнет.

В этом случае pathsFromStartToEnd и allPathsFromStartToEnd равны 2 :

  const someObject = { propA: true, propB: false };
  const someFunction = (propName) => {
    if (propName === true) {
      console.log("something");
    } else {
      console.log("whatever");
    }
  }
  for (const propName in someObject) {
    someFunction(propName)
  }
  const [myState, setMyState] = useState(null);

Я до сих пор не знаю почему.

dankreiger 20 сент. 2019

@gaearon , я создал MR для адресации и исправления этой проблемы (# 16853).

Основная причина этого в том, что значение allPathsFromStartToEnd вычислено неправильно.
В этом примере количество путей от начала до конца должно быть 3, но функция возвращает 2.

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

M-Izadmehr 22 сент. 2019

Это все еще проблема с 2.4.0, немного более простым воспроизведением:

import * as React from "react";

function Component() {
  let isLastEven = false;
  for (let x of [1, 2, 3]) {
    if (x % 2 == 0) {
      isLastEven = true;
    } else {
      isLastEven = false;
    }
  }
  let y = React.useMemo(() => 1, []);
  return <div>{y}</div>;
}

можно повторно открыть # 16853?