我在做一份结婚请柬.
我想使用‘redux/TOOLKIT’创建一个全球模式组件,并在全局管理它. 当我单击下拉菜单时,我创建了要显示模式的消息,当我单击确定或取消按钮和背景时,我try 关闭它.
打开模式的事件没有问题,但要关闭它,请发送以下错误. 附件是根据错误信息判断的内容.
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>
</>
)
}
- 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