带有 Select 选项菜单的 React Hooks/功能组件抱怨破坏 'Rules of Hooks'

Question

我有 2 个组件，一个包含状态的 Parent 和一个包含 select 下拉列表的 Child 应该修改 parent 中的状态。当我尝试在 React Dev 工具/组件中检查此组件时，我收到警告 "Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: ..." 但 none 给出的原因似乎适用于我的代码。

这是我的代码：

PARENT:

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

CHILD:

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

控制台警告表明以下可能是我的组件损坏的原因：

您的 React 和渲染器版本可能不匹配（例如 React DOM）
- 我正在使用 16.9.0 的 React 和 react-dom。
你可能违反了 Hooks 规则
- 我已阅读此 https://reactjs.org/docs/hooks-rules.html 并且无法找到我破坏 'rules'
您可能在同一个应用程序中拥有多个 React 副本
- 我用过npm ls react和npm ls react-dom，我的项目只有一个dep.

任何人都可以帮助我了解我的代码如何破坏 'Rules of Hooks' 吗？

Answer 1

问题是我的开发环境正在使用的 index.html 文件中有一个手动 <script> 标记，这导致安装了 2 个包实例，因为我也通过 webpack 安装它。解决方案是删除手动脚本标签。看来我违反了规则 3 或 Hooks 规则：我有 2 个 React & React.DOM 运行.

实例

带有 Select 选项菜单的 React Hooks/功能组件抱怨破坏 'Rules of Hooks'

React Hooks / Functional Component with Select Option Menu complains of breaking 'Rules of Hooks'

javascript

reactjs

react-hooks

react-functional-component