React中Return语句报错：无法读取undefined的activeModal属性

核心错误原因 #

你在ModalProvider.js中使用ModalContext.Provider时，把传递值的属性名写成了大写的Value，而React要求这个属性必须是小写的value。这导致Context没有正确传递modalFeatures对象，所以Modal组件和HomeScreen组件中通过useContext(ModalContext)获取到的是undefined，访问undefined.activeModal自然就抛出了类型错误。

修复步骤 #

1. 修正ModalProvider中的Provider属性名 #

打开ModalProvider.js，将<ModalContext.Provider Value={modalFeatures}>改为<ModalContext.Provider value={modalFeatures}>：

// ModalProvider.js 修正后的代码
import { createContext, useState } from "react";
import { CreatePlaygroundModal } from "./Modals/CreatePlaygroundModal";

export const ModalContext = createContext();
 
export const ModalProvider = ({children}) => {
    const [modalType, setModalType] = useState(null);
 
    const closeModal = () => {
        setModalType(null)
    };
   
    const modalFeatures = {
        openModal: setModalType,
        closeModal,
        activeModal: modalType
    }

    console.log({modalType});
    
    return (
        // 注意这里的value是小写！
        <ModalContext.Provider value={modalFeatures}>
            {children}  
        </ModalContext.Provider>
    )
} 

2. 确保组件被ModalProvider包裹 #

确认你的HomeScreen组件（或者其上层组件）已经被ModalProvider包裹，否则useContext仍然无法获取到Context的值。比如在你的根组件（如App.js）中：

import { ModalProvider } from './Providers/ModalProvider';
import { HomeScreen } from './screens/HomeScreen';

function App() {
  return (
    <ModalProvider>
      <HomeScreen />
    </ModalProvider>
  );
}

export default App;

验证修复 #

完成上述修改后，重新运行项目：

• 点击按钮调用openCreatePlayGroundModal时，modalType会被设置为"CREATE_PLAYGROUND"
• Modal组件中modalFeatures.activeModal就能正确获取到值，从而渲染CreatePlaygroundModal组件

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