React Hooks / Функциональный компонент с меню выбора параметров жалуется на нарушение «Правил крючков»

Question

У меня есть 2 компонента, родительский элемент, который содержит состояние, и дочерний элемент, который имеет раскрывающийся список выбора, который должен изменять состояние в родительском элементе. Когда я пытаюсь осмотреть этот компонент в инструментах / компонентах React Dev, я получаю предупреждение «Uncaught Error: Invalid hook call. Недопустимый хук-хук. Хуки могут быть вызваны только внутри тела компонента функции. Это может произойти по одной из следующих причин:. .. "но ни одна из приведенных причин, похоже, не применима к моему коду.

Вот мой код:

РОДИТЕЛЬ:

import React, { useState } from 'react'
import Child from './child'

const Parent = () => {
  const [gender, setGender] = useState('Men')

  const changeHandler = (value) => {
    console.log('Change Handler Fired', value)
    setGender(value)
  }

  return (
    <>
      <Child gender={gender} onChange={changeHandler} />
    </>
  )
}

export default Parent

РЕБЕНОК:

import React from 'react'

function Child({ gender, onChange }) {
  return (
    <select
      id="genders"
      name="gender"
      value={gender}
      onChange={(event) => onChange(event.target.value)}
    >
      <option key="Men" value="Men">
        Men
      </option>
      <option key="Women" value="Women">
        Women
      </option>
    </select>
  )
}

export default Child

В консольном предупреждении указывается, что причиной может быть отказ моего компонента:

1. Возможно, у вас не совпадают версии React и средства визуализации (например, React DOM)
   • Я использую 16.9.0 обоих реагирующих и реактивных доменов.
2. Возможно, вы нарушаете Правила Крюков
   • Я прочитал это https://reactjs.org/docs/hooks-rules.html и не могу найти как я нарушил «правила»
3. В одном приложении может быть несколько копий React
   • Я использовал npm ls react и npm ls react-dom, Мой проект имеет только один из каждого отдела.

Может кто-нибудь помочь я понимаю, как мой код нарушает «правила хуков»?

Answer 1

Проблема заключалась в том, что у меня был ручной <script> тег в индексе. html файл, который использовался моей средой разработки, это приводило к монтированию 2 экземпляров комплекта, так как я также монтировал его WebPack. Решением было убрать тег скрипта вручную. Кажется, я нарушал Правило 3 или Правила Хуков: у меня было 2 запущенных экземпляра React & React.DOM.