javascript 在React上下文中未定义

iszxjhcz 于 5个月前发布在 Java

关注(0)|答案(1)|浏览(67)

我在React中遇到了一个上下文问题。这是我的上下文代码。

import {useContext, createContext } from 'react';
import { GoogleAuthProvider, signInWithPopup, signOut, onAuthStateChanged } from 'firebase/auth'
import { firebaseAuth } from '../Firebase/Config.js'

const AuthContext = createContext();

export const AuthContextProvider = ({children}) => {
    const googleSignIn = async () => {
        const provider = await new GoogleAuthProvider();
        signInWithPopup(firebaseAuth, provider);
      }
    return (
        <AuthContext.Provider value={googleSignIn}>
            {children}
        </AuthContext.Provider>
    )
}

export const UserAuth = () => {
    return useContext(AuthContext);
}

字符串
这就是我使用这个上下文的地方。

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import UploadImage from './Firebase/UploadImage.jsx'
import './App.css'
import {GoogleButton} from 'react-google-button'
import { AuthContextProvider, UserAuth } from './Context/AuthContext.jsx'

function App() {

  const googleSignIn = UserAuth();

    const handleGoogleSignIn = async () => {
      console.log(googleSignIn);
      try {
        await googleSignIn();
      } catch (error) {
        console.log(error);
      }
    }

  return (
    <div>
    <AuthContextProvider>
      <UploadImage />
      <div className="HandleGoogleSignIn">
        <GoogleButton onClick={handleGoogleSignIn} />
      </div>
    </AuthContextProvider>
  </div>  
  )
}

export default App

型
你知道为什么googleSignIn是未定义的吗？我没有看到任何错误。应该没问题，但不是。我刚刚开始学习React。

JavaScript

来源：https://stackoverflow.com/questions/77742139/undefined-in-react-context

1条答案

按热度按时间

eaf3rand1#

以下是一些建议，你可以尝试：
1.从const provider = await new GoogleAuthProvider（）中删除await;而在signInWithPopup（firebaseAuth，provider）中添加await;因此，代码如下所示：

import { useContext, createContext } from 'react';
import { GoogleAuthProvider, signInWithPopup, signOut, onAuthStateChanged } from 'firebase/auth'
import { firebaseAuth } from '../Firebase/Config.js'

const AuthContext = createContext();

export const AuthContextProvider = ({
  children
}) => {
  const googleSignIn = async() => {
    const provider = new GoogleAuthProvider();
    await signInWithPopup(firebaseAuth, provider);
  }
  return ( <
    AuthContext.Provider value = { googleSignIn } > { children } </AuthContext.Provider>
  )
}

export const UserAuth = () => {
  return useContext(AuthContext);
}

字符串
1.以下是一些需要检查的事项：

**Firebase配置：**确保您的Firebase配置（Config.js中的firebaseAuth）设置正确。
**Firebase导入：**请再次检查您的Firebase导入是否正确，特别是signInWithPopup函数。
**检查错误：**打开浏览器的开发者工具（通常通过按F12或右键单击并选择“检查”）并检查控制台是否有任何错误消息。这可以提供有关可能出错的有价值信息。
**确保Firebase已初始化：**确保您的Firebase应用已正确初始化，并且在尝试使用之前已加载配置。

赞(0）回复(0）举报 5个月前

我来回答

javascript 在React上下文中未定义

1条答案

相关问题

热门标签

最新问答