Когда я использую реакционные хуки в условных выражениях, почему eslint-plugin-реагировать-хуки не предупреждают?

Question

Я использую реагирование 16.8 и eslint-plugin-Reaction-hooks 1.6.0. Когда я использую условные хуки, я надеюсь, что eslint может предупредить меня. есть мой конфиг:

"eslintConfig": {
    "parser": "babel-eslint",
    "plugins": [
      "react-hooks"
    ],
    "rules": {
      "react-hooks/rules-of-hooks": "error",
      "react-hooks/exhaustive-deps": "warn"
    }
}

если я использую условные хуки в пользовательских хуках, будет выдано следующее предупреждение: "React Hook \" useState \ "вызывается условно. React Hooks должны вызываться в том же порядке в каждом компоненте рендеринга."

function useCustomHook() {
  if (Math.random() > 0.5){
    const [a, setA] = useState(0)
  }
}

но если я использую хуки в компоновке функций, это не сработает.

function MyComponent() {
  if (Math.random() > 0.5){
    const [a, setA] = useState(0)
  }
  return null
}

Answer 1

На самом деле, когда я вставляю вашу функцию в файл App.js, созданный create-реагировать-приложение, при запуске приложения возникает ожидаемая ошибка.

Возможно, ваша функция не считается компонентом React(ваша функция считается общей функцией).Убедитесь, что у вас есть Реакция на область (import React from "react";)

Answer 2

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

посмотрите документы, в них прописаны правила хуков. https://reactjs.org/docs/hooks-rules.html

что вы хотите, это что-то вроде этого

 const [a, setA] = useState(initialVal)
 if (Math.random() > 0.5){
    setA(0)
 }