React Invalid hook call报错排查：Redux Toolkit全局模态框关闭异常

我使用Redux Toolkit实现全局模态组件的状态管理，点击下拉菜单时能正常设置模态框内容并打开它，但点击确定、取消按钮或背景区域尝试关闭时，出现了Invalid hook call错误。以下是排查的相关信息：

1. package.json相关依赖 #

"react": "^18.2.0",
"react-copy-to-clipboard": "^5.1.0",
"react-dom": "^18.2.0",

2. 相关代码实现 #

modalSlice.js #

import { createSlice } from '@reduxjs/toolkit'

const initialState = {
  modalContent: '',
  isOpen: false,
}

export const modalSlice = createSlice({
  name: 'modal',
  initialState,
  reducers: {
    openModal: (state, actions) => {
      const { modalContent } = actions.payload
      const updateState = {
        ...state,
        isOpen: true,
        modalContent,
      }
      return updateState
    },
    closeModal: (state, actions) => {
      console.log(actions)
      const updateState = {
        ...initialState,
      }
      return updateState
    },
  },
})

export const { openModal, closeModal } = modalSlice.actions

export default modalSlice.reducer

Modal.js #

const Modal = () => {
  const dispatch = useDispatch
  const { modalContent } = useSelector((state) => state.modal)
  const modalHandler = (e) => {
    dispatch(closeModal)
  }
  return (
    <>
      <ModalContainer>
        <ModalBack onClick={modalHandler} />
        <ModalContentWrapper>
          <ModalContent>{modalContent}</ModalContent>
          <ModalBtnWrapper>
            <ModalBtn onClick={modalHandler}>취소</ModalBtn>
            <ModalBtn onClick={modalHandler}>확인</ModalBtn>
          </ModalBtnWrapper>
        </ModalContentWrapper>
      </ModalContainer>
    </>
  )
}

3. npm ls react 执行结果 #

wedding_reception@0.1.0 /Users/mary/231014 wedding/mobile/wedding_reception
├─┬ @fortawesome/react-fontawesome@0.2.0
│ └── react@18.2.0 deduped
├─┬ @reduxjs/toolkit@1.9.5
│ └── react@18.2.0 deduped
├─┬ @testing-library/react@13.4.0
│ └── react@18.2.0 deduped
├─┬ react-copy-to-clipboard@5.1.0
│ └── react@18.2.0 deduped
├─┬ react-dom@18.2.0
│ └── react@18.2.0 deduped
├─┬ react-redux@8.1.1
│ ├── react@18.2.0 deduped
│ └─┬ use-sync-external-store@1.2.0
│   └── react@18.2.0 deduped
├─┬ react-router-dom@6.14.1
│ ├─┬ react-router@6.14.1
│ │ └── react@18.2.0 deduped
│ └── react@18.2.0 deduped
├─┬ react-scripts@5.0.1
│ └── react@18.2.0 deduped
├── react@18.2.0
└─┬ styled-components@6.0.2
  └── react@18.2.0 deduped

错误原因及修复方案 #

问题源于Modal.js中的两处语法错误：

1. useDispatch未执行：const dispatch = useDispatch只是引用了hook函数，没有调用它。正确写法是执行hook获取dispatch函数：const dispatch = useDispatch()
2. 分发action时未调用action creator：dispatch(closeModal)仅传递了action creator函数本身，需要调用它生成action对象才能被dispatch，正确写法为dispatch(closeModal())

修正后的Modal.js代码：

import { useDispatch, useSelector } from 'react-redux'
import { closeModal } from './modalSlice'

const Modal = () => {
  const dispatch = useDispatch()
  const { modalContent } = useSelector((state) => state.modal)
  const modalHandler = (e) => {
    dispatch(closeModal())
  }
  return (
    <>
      <ModalContainer>
        <ModalBack onClick={modalHandler} />
        <ModalContentWrapper>
          <ModalContent>{modalContent}</ModalContent>
          <ModalBtnWrapper>
            <ModalBtn onClick={modalHandler}>취소</ModalBtn>
            <ModalBtn onClick={modalHandler}>확인</ModalBtn>
          </ModalBtnWrapper>
        </ModalContentWrapper>
      </ModalContainer>
    </>
  )
}

补充说明：根据你打开模态框功能正常的情况，默认你的Modal组件已经被包裹在Redux的Provider组件内，这部分无需额外调整。

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