我在做一份结婚请柬.

我想使用‘redux/TOOLKIT’创建一个全球模式组件,并在全局管理它. 当我单击下拉菜单时,我创建了要显示模式的消息,当我单击确定或取消按钮和背景时,我try 关闭它.

打开模式的事件没有问题,但要关闭它,请发送以下错误. 附件是根据错误信息判断的内容.

enter image description here

1 . 干扰.json:

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

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

莫达尔.js莫达尔.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>
    </>
  )
}
  1. NPM%lsreact
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

推荐答案

Invalid Hook Call Warning个 你可能违反了虎克的规则.

it should be written like that

 const dispatch = useDispatch(); 

Reactjs相关问答推荐

如何将google地址lat收件箱设置为输入值?

如何使用react-router-dom导航到网页中的其他路由?

无法使用#13;或br将新行设置为文本区域'"&"<>

URL参数和React路由中的点

Redux向后端发送请求时出现钩子问题

try 在Dockerfile中使用AWS CLI将React构建工件上传到S3时出错

如何在React中的textarea中显示字符数?

使用REACT-RUTER-V6和ZUSTANDreact 中的身份验证

react ';S使用状态不设置新状态

如何使用useState响应快速/顺序状态更新

如何使用TouchStart/TouchEnd在Table ReactJS中交换位置?

有没有比;KeyableShell;组成部分

React 错误无法读取未定义的属性(读取id)#react

.populate() 方法在 mongodb 中不起作用

未捕获的运行时错误:对象作为 React 子项无效

部署到github pages时请求路径错误

如何在同一路由路径上重新渲染组件(链接,V6)reactjs

更新 Next.js 路由查询更改的状态会导致无限循环

为什么此代码中的 useState 不更新(文本更新但 id 不更新)?

将 Material UI 菜单渲染为