React-redux `useSelector` 抱怨 Hook 调用无效答案

【问题标题】：React-redux `useSelector` complains about Invalid Hook callReact-redux `useSelector` 抱怨 Hook 调用无效
【发布时间】：2021-04-16 15:05:52
【问题描述】：

我正在使用React 和Redux 为下拉菜单构建一个动态子菜单。计划是当用户单击下拉菜单时，将进行 API 调用，并根据 API 的响应创建一个子菜单。这是我的下拉菜单文件

MainMenu.js

import React, {useEffect} from 'react'
import CreateSubMenu from './utils/CreateSubMenu.js'
import fetchSubMenuData from './actions/submenuAction.js'

function getSubMenu(menu, level){
  if(level == "level1") {
      const updatedMenu = CreateSubMenu(menu)
      return updatedMenu
  }

// entry level function
const DropdownMenu = () => {
     useEffect(() => {
        fetchSubMenuData();
       }, [])

    let menu = {"menu": "Locations", "submenu": []}
    const updatedNavigation = getSubMenu(menu, "level1")
}

以下是包含查找 API 响应并将子菜单添加到菜单的函数的文件。点击下拉菜单时调用 API

CreateSubMenu.js

import { useSelector, useDispatch } from 'react-redux'

const CreateSubMenu = (menu) => {
    const subMenuData = useSelector(state=> state.addMenu)
}

但在 CreateSubMenu.js 中，我收到此错误Error: Invalid hook call. Hooks can only be called inside of the body of a function component. 当我在函数内部使用useSelector 时会出现此错误。

我做错了什么？

【问题讨论】：

你能分享你的组件的完整代码吗？
你做了const updatedMenu = CreateSubMenu(menu) 但CreateSubMenu 没有返回任何东西。如果它重新运行 jsx，您可以执行以下操作：const updatedMenu = <CreateSubMenu {...menu} />

标签： reactjs redux react-hooks

【解决方案1】：

钩子不能被有条件地调用。在您的代码中，您有条件地调用 CreateSubMenu if level == "level1"

  if(level == "level1") {
      const updatedMenu = CreateSubMenu(menu)
      return updatedMenu
  }

这打破了钩子的规则。

相反，在条件之前调用 useSelector，并将值作为参数传递。

const subMenuData = useSelector(state=> state.addMenu)
  if(level == "level1") {
      const updatedMenu = CreateSubMenu(menu, subMenuData)
      return updatedMenu
  }

【讨论】：

嗨，为了简单起见，我实际上并没有发布整个代码。还有其他 API 调用，因此还有更多的 redux 状态。我想根据level 参数定位某个redux 状态。就没有别的办法了吗？
如果我把useSelector 放在条件检查之前，它仍然在getSubMenu 函数内并给出相同的错误。
这就是我实际所做的。我意识到可以事先访问状态，但有条件地传递状态。但为了你的努力，为了未来的观众，我会接受你的回答。干杯！

【解决方案2】：

在CreateSubMenu.js 中，您可能以错误的方式导出它 - 尝试添加

export default CreateSubMenu;

在CreateSubMenu.js文件的末尾

【讨论】：