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

Question

useContext一直回来undefined找我。

我很困惑为什么在这里，因为我有我的 Provider 并且我有我的 defaultValues。

我在哪里消费上下文：

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>
  );
}

标签： reactjsreact-hooksreact-context

Answer 1

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

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