React JS使用Context封装PostHog报Cannot read properties of undefined求助

核心错误点 #

• posthog.init() 方法不会返回posthog实例，调用setInitPosthog(posthog.init())会将上下文存储的值覆盖为init方法的返回值（通常为undefined），无法读取identify方法
• useEffect依赖项设置了initPostHog，每次执行setInitPosthog都会触发useEffect重新执行，造成无限循环
• MainPage组件中没有调用自定义的usePostHog()钩子获取上下文实例，直接调用的全局posthog还未完成初始化，值为undefined
• posthog.init没有传入必填的项目API Key、实例地址等配置参数，初始化本身不完整
• 主组件包裹代码中Main标签未闭合，会引发语法错误

修正后代码 #

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 [posthogInstance, setPosthogInstance] = useState(null)

    useEffect(() => {
        // 替换为你自己的PostHog项目API Key和实例地址
        posthog.init('YOUR_POSTHOG_API_KEY', {
            api_host: 'YOUR_POSTHOG_HOST',
            // 可补充其他自定义配置
        })
        setPosthogInstance(posthog)
    }, []); // 依赖项留空，仅在组件挂载时执行一次初始化

    // 初始化完成前返回加载态，避免子组件提前调用方法报错
    if (!posthogInstance) return null

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

export { PostHogContext };

主组件包裹代码 #

<PostHogContextProvider>
  <Main /> {/* 修正标签闭合问题 */}
</PostHogContextProvider>

main.js MainPage组件 #

import { useEffect } from 'react'
import { usePostHog } from './PostHogContext' // 替换为你实际的文件相对路径

function MainPage(props){
    const posthog = usePostHog()
    const user = {} // 替换为你实际的user变量来源

    // 放在useEffect中，确保实例和用户信息存在时才调用方法
    useEffect(() => {
        if (posthog && user?.email) {
            posthog.identify(user.email)
        }
    }, [posthog, user])
}

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