即使使用默认值，useContext 也返回 undefined

Question

useContext 不断为我返回 undefined。

我很困惑为什么要在这里，因为我有我的提供者并且我有我的默认值。

我在哪里使用上下文：

import React from 'react';
import { useContext } from 'react';
import { UserContext } from '../context/UserContext.js';

const Login = () => {
  console.log(UserContext);
  console.log(useContext(UserContext));
  const context = useContext(UserContext);

  const authenticate = (e) => {
    e.preventDefault();
    // const token = login();
    test();
  };

  return (
    <div className="login-container">
      <button onClick={authenticate}>Login</button>
    </div>
  );
}

export default Login;

我的App.js:

import { UserProvider } from './context/UserContext.js';

import './App.css';


function App() {
  return (
    <UserProvider>
      <Login />
      </UserProvider>
  );
}

export default App;

我的UserContext.js:

import { createContext } from 'react';
import Web3 from 'web3';
import APIClient from '../client/dapp-api';

const defaultValues = {
  user : null,
  test: () => {},
};

export const UserContext = createContext(defaultValues);


export const UserProvider = ({ children }) => {
  const test = () => {
    console.log('this works');
  };

  return(
    <UserContext.Provider values={{
      ...defaultValues,
      test,
      login,
    }}>
      { children }
      </UserContext.Provider>
  );
}

Answer 1

上下文提供者有一个名为“值”的道具，而不是“值”。在您的 UserProvider 组件中，将您的用法更改为：

<UserContext.Provider value={{ ...data here... }}>

即使使用默认值，useContext 也返回 undefined

useContext returning undefined even with default values

reactjs

react-context

react-hooks