Return 语句不起作用，并且在 React js 中给出错误

Question

我正在编写这段代码，我正在制作一些模态框，所以我写了这段代码

import { useContext } from "react"
import { ModalContext } from "../ModalProvider"
import { CreatePlaygroundModal } from "./CreatePlaygroundModal";

export const Modal = () => {
    const modalFeatures = useContext(ModalContext);

    return (
      <>{modalFeatures.activeModal === "CREATE_PLAYGROUND" && <CreatePlaygroundModal />}</>          
    );
}

这里的行给了我一个错误

return (
      <>{modalFeatures.activeModal === "CREATE_PLAYGROUND" && <CreatePlaygroundModal />}</>          
    );

我不知道为什么这个简单的部分不起作用 另外，我是初学者，所以如果太小了，请接受我的歉意

错误是

TypeError: Cannot read properties of undefined (reading 'activeModal')
    at Modal (Modal.js:9:1)
    at renderWithHooks (react-dom.development.js:15486:1)
    at mountIndeterminateComponent (react-dom.development.js:20103:1)
    at beginWork (react-dom.development.js:21626:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27490:1)
    at performUnitOfWork (react-dom.development.js:26596:1)
    at workLoopSync (react-dom.development.js:26505:1)

我尝试重写这部分，但没有帮助

Answer 1

您应该检查包含

modalFeatures

的

activeModal

。 将此代码重写为

return (
      <>{modalFeatures?.activeModal === "CREATE_PLAYGROUND" && <CreatePlaygroundModal />}</>          
    );