如何讓 `eslint-plugin-react-hooks` 對導出為 `default` 的功能組件進行 lint？

Question

我特意創建了一個簡單的函數式組件，打破了鈎子的規則。 它包含以下代碼段。

  if (Math.rand > 0.5) {
    const [name, setName] = useState("fred");
  }

我希望eslint-plugin-react-hooks會發現這個明顯的錯誤，但事實並非如此。 在嘗試深入了解之后，我發現當我將函數導出為默認值時 - linter 並沒有這樣做。 （我正在使用@typescript-eslint/parser來獲得它的價值）。

有沒有辦法讓后一種語法與eslint / eslint-plugin-react-hooks ，或者我必須始終創建一個命名的功能組件，然后運行export default name; 在功能之下？

https://codesandbox.io/s/hook-demo-c10y2

Answer 1

所以......我剛剛發現這是eslint-plugin-react-hooks一個已知錯誤。 似乎您需要為插件提供一個命名函數來捕獲和整理您的錯誤。 https://github.com/facebook/react/issues/14404 （特別是"react-hooks/rules-of-hooks"規則）。

Answer 2

您的代碼違反了鈎子規則，在該規則中，鈎子只能在代碼的頂層調用。 它不能放在 if...else 語句中。 在此處查看鈎子規則： https : //reactjs.org/docs/hooks-rules.html