React JS 上下文，TypeError：无法读取未定义的属性答案

【问题标题】：React JS Context, TypeError: Cannot read properties of undefinedReact JS 上下文，TypeError：无法读取未定义的属性
【发布时间】：2021-11-05 11:59:25
【问题描述】：

我对 JS 和 React JS 还很陌生，所以真的很需要帮助。

我正在尝试为此导入“posthogs”创建上下文。我制作了一个上下文文件，并在我的主目录中添加了和包围

PostHogContext.js

import posthog from "posthog-js";
import React, { useContext, useEffect, useState } from "react";

const PostHogContext  = React.createContext();

export function usePostHog(){
    return useContext(PostHogContext);
}

export default function PostHogContextProvider({ children }) {

    const [initPostHog,setInitPosthog] = useState(posthog)

    useEffect(() => {
            console.log("Initializing PostHog");
            setInitPosthog(posthog.init());
    },[initPostHog]);

    return(
        <PostHogContext.Provider value={initPostHog}>
            {children}
        </PostHogContext.Provider>
    )
}

export { PostHogContext };

用 main 包围上下文提供者

<PostHogContextProvider>
  <Main>
</PostHogContextProvider>

当我从我的 main.js

中调用它时

function MainPage(props){

posthog.identify(user.email);

}

我收到这个错误提示

TypeError: Cannot read properties of undefined (reading 'identify')

据我所知，它似乎没有找到 posthog.identify 函数或 posthog 值为 null，但我不确定为什么在提供程序中设置它时会这样

【问题讨论】：

你在打电话给usePostHog吗？
@BenWest 是的。我打电话给我const posthog = usePostHog()
您正在访问上下文 outside 上下文提供程序并且没有提供任何默认上下文值，因此未定义访问。
@DrewReese 这是什么意思？我需要将 posthog 导入到我的 main.js 中吗？
哦，抱歉，我看错了第一个 sn-p 中的代码在做什么。请编辑问题以包含所有相关代码。 Main 组件在做什么，导致错误的重现步骤是什么？

标签： javascript reactjs posthog

【解决方案1】：

好吧，我想通了，首先

我的 setState 有错字。

const [initPostHog,setInitPosthog] = useState(posthog)

initPostHog 和 setInitPosthog。所以我的值没有正确设置。

【讨论】：