循环组件内调用Redux Hook触发无效Hook调用问题求助

问题背景 #

此前使用Vue开发，现在基于React实现了一个可通过Redux Store全局调用的Dialog组件。Dialog内部操作（如向Store发送false关闭Dialog）一切正常，但在循环渲染的ListItem组件中调用openDialog函数时，触发「Invalid hook call」错误。

相关代码 #

父组件（循环渲染ListItem） #

{DummyCompany.registerInfo.map((info, index) => {
  return (
    <ListItem
      key={`${index}_${info.label}`}
      message={info.label}
      type={info.type}
      iconRight="notification"
      dialogTitle={info.tooltip.title}
      dialogDescription={info.tooltip.description}
      onClick={() => openDialog(info.tooltip.title, info.tooltip.description)}
    />
  )
})}

子组件ListItem #

import { FunctionComponent } from 'react'
import styled from 'styled-components'

import { Spacing } from '../../../shared/enums'
import Icon from '../../Icon'
import Text from '../../Text'
import IListItem from './ListItem.interface'

const Content = styled.div`
  height: 35px;
  display: flex;
  flex-direction: row;
  align-items: center;
`

const ListItemIcon = styled.div`
  margin: ${Spacing.Small} ${Spacing.Medium} ${Spacing.Small} 0;
  height: 32px;
  width: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
`

const ListItem: FunctionComponent<IListItem> = ({
  onClick,
  iconLeft,
  iconRight,
  message = '',
  type,
}) => {
  return (
    <Content>
      {iconLeft ? (
        <ListItemIcon>
          <Icon
            name={iconLeft}
            size={type === 'attention' ? 'medium' : 'nav-item'}
            onClick={onClick}
          />
        </ListItemIcon>
      ) : undefined}
      <Text
        style={{
          fontWeight: type === 'attention' ? '700' : '',
          color: type === 'attention' ? 'black' : '',
        }}
      >
        {message}
      </Text>
      {iconRight ? (
        <ListItemIcon>
          <Icon
            color="blue"
            name={iconRight}
            size={type === 'attention' ? 'medium' : 'nav-item'}
            onClick={onClick}
          />
        </ListItemIcon>
      ) : undefined}
    </Content>
  )
}

export default ListItem

openDialog函数（触发错误的核心代码） #

import { useDispatch } from 'react-redux'
import { setShowDialog } from '../../redux/slices/dialogSlice'

export const openDialog = (title: string, description: string) => {
  const dispatch = useDispatch()

  dispatch(
    setShowDialog({
      showDialog: true,
      title: title,
      description: description,
    })
  )
}

错误信息 #

react-dom.development.js:16227 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:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

错误原因 #

核心问题是违反了React Hooks的核心规则：所有Hook（包括useDispatch）只能在函数组件的顶层作用域调用，绝对不能在普通函数、事件回调、循环、条件判断等非顶层位置调用。

你的openDialog是一个普通工具函数，里面直接调用了useDispatch Hook。当点击ListItem触发onClick回调时，相当于在事件回调内部执行了Hook，完全违反了规则，因此触发错误。

解决方案 #

方案1：父组件获取dispatch，传递给openDialog #

将openDialog改为接收dispatch作为参数的普通函数，不在内部调用Hook：

// 修改后的openDialog
export const openDialog = (dispatch: any, title: string, description: string) => {
  dispatch(
    setShowDialog({
      showDialog: true,
      title: title,
      description: description,
    })
  )
}

在父组件顶层调用useDispatch获取dispatch，再传递给openDialog：

// 父组件中
import { useDispatch } from 'react-redux';
import { openDialog } from './your-path-to-openDialog';

// 必须在父组件顶层调用Hook
const dispatch = useDispatch();

// 循环渲染部分
{DummyCompany.registerInfo.map((info, index) => {
  return (
    <ListItem
      key={`${index}_${info.label}`}
      message={info.label}
      type={info.type}
      iconRight="notification"
      onClick={() => openDialog(dispatch, info.tooltip.title, info.tooltip.description)}
    />
  )
})}

方案2：封装为自定义Hook #

如果希望保留类似“全局调用”的写法，可以将openDialog封装为自定义Hook，确保Hook在组件顶层调用：

// 自定义Hook：useDialog
import { useDispatch } from 'react-redux'
import { setShowDialog } from '../../redux/slices/dialogSlice'

export const useDialog = () => {
  const dispatch = useDispatch()

  const openDialog = (title: string, description: string) => {
    dispatch(
      setShowDialog({
        showDialog: true,
        title: title,
        description: description,
      })
    )
  }

  return { openDialog }
}

在父组件顶层使用自定义Hook，拿到openDialog函数后再用于事件回调：

// 父组件中
import { useDialog } from './your-path-to-useDialog';

// 顶层调用自定义Hook
const { openDialog } = useDialog();

// 循环渲染部分保持原有写法
{DummyCompany.registerInfo.map((info, index) => {
  return (
    <ListItem
      key={`${index}_${info.label}`}
      message={info.label}
      type={info.type}
      iconRight="notification"
      onClick={() => openDialog(info.tooltip.title, info.tooltip.description)}
    />
  )
})}

两种方案的优势 #

• 方案1：简单直接，不需要修改原有函数的逻辑，只需将dispatch作为参数传递，完全符合Hook规则。
• 方案2：封装性更好，将Dialog相关逻辑统一在自定义Hook中，后续扩展（如添加closeDialog）更方便，代码更整洁。

内容的提问来源于stack exchange，提问作者Osmankaapa