useContext x 不是函数

Question

所以我试图从后端获取当前用户（使用supabase，react）来确定当他们单击用户图标时是否应该显示个人资料或登录提示。我尝试过使用一些不同的方法，但我一直遇到同样的问题。我正在使用 React 中的 useConntext 和 context.provider 来存储用户，以便可以从任何地方访问它。我希望应用程序检查应用程序中的任何位置谁是当前用户。当然，这最好只是 onAuthStateChange，但这不是目前主要的担忧。此时我继续遇到同样的错误：setCurrentUser 不是 App.js 组件中的函数。这个 setCurrentUser 是我放入 DataContext.js （我的上下文文件）中的 useState 的一部分。该应用程序确实运行，但控制台不断显示相同的错误，我能够在将用户数据更改为 setCurrentUser 函数之前通过控制台记录用户数据。

3 个最相关的文件：

应用程序.js

import Navbar from './components/Navbar';
import Footer from './components/Footer';
import Home from './components/Home';
import AboutUs from './components/AboutUs';
import Contact from './components/Contact';
import AuthPage from './components/AuthPage';
import Products from './components/Products';
import Pants from './components/Pants';
import Missing from './components/Missing';
import { Route, Routes as Switch } from 'react-router-dom';
import React, { useEffect, useContext } from 'react';
import DataContext from './components/context/DataContext';
import backbase from './config/backbaseClient';

function App() {

  const setCurrentUser = useContext(DataContext)

  useEffect(() => {
    async function fetchData() {
        const { data: { user } } = await backbase.auth.getUser()
        await setCurrentUser(user)
    }
    fetchData()
  })


  return (
    <div className="App">
      <Navbar />
      <Switch>
        <Route path="/home" element={<Home />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="/about_us" element={<AboutUs />} />
        <Route path="/user" element={<AuthPage />} />
        <Route path="/products" element={<Products />} />
        <Route path='/pants' element={<Pants />} />
        <Route path="*" element={<Missing />} />
      </Switch>
      <Footer />
    </div>
  );
}

export default App;

索引.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { DataProvider } from './components/context/DataContext';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <DataProvider>
      <Router>
          <Routes>
              <Route path="/*" element={<App />} />
          </Routes>
      </Router>
    </DataProvider>
  </React.StrictMode>
);

DataContext.js

import React, { createContext, useState } from 'react'

const DataContext = createContext({});

export const DataProvider = ({ children }) => {

    const [currentUser, setCurrentUser] = useState(null)

    /* suggested using other function to update for unwanted complications
    thus a function taking a value and putting it in setCurrentUser */

    return (
        <DataContext.Provider value={{
            setCurrentUser, currentUser
        }}>
            {children}
        </DataContext.Provider>
    )
}

export default DataContext;

Answer 1

在 App.js 中的

const { setCurrentUser } = useContext(DataContext)

添加大括号。