useContext配置默认值且已使用Provider仍返回undefined问题求助

• 核心错误是 UserContext.Provider 的传值属性拼写错误：React 官方规定 Context Provider 接收的传值属性名是 value，你代码里写成了复数形式 values。且 React Context 的默认值仅在上层没有匹配到对应Provider时生效，只要上层包裹了Provider，就只会读取Provider的value属性值，你写了values属性等于没有给Provider传有效值，所以useContext直接返回undefined。
• Provider 内传入了未定义的 login 变量：你在传值对象里写了 login 字段，但整个 UserProvider 作用域内没有定义 login 方法，会导致上下文对象初始化异常。
• Login 组件内未从上下文取值就直接调用方法：你在 authenticate 函数里直接调用 test()，没有从 useContext 返回的上下文对象中解构 test 方法，就算上下文正常返回也会触发 test is not defined 报错。

修复后代码 #

UserContext.js #

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

const defaultValues = {
  user : null,
  test: () => {},
  login: () => {} // 补充login默认定义，后续可完善实现逻辑
};

export const UserContext = createContext(defaultValues);


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

  const login = () => {
    // 补充你的login实现逻辑
  };

  return(
    {/* 把属性名values改为value */}
    <UserContext.Provider value={{
      ...defaultValues,
      test,
      login,
    }}>
      { children }
      </UserContext.Provider>
  );
}

Login 组件 #

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

const Login = () => {
  const context = useContext(UserContext);
  // 从上下文对象解构需要的方法
  const { test } = context;
  console.log(UserContext);
  console.log(context);

  const authenticate = (e) => {
    e.preventDefault();
    // 调用从上下文取出的test方法
    test();
  };

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

export default Login;

App.js代码无需修改。

内容的提问来源于stack exchange，提问作者Kyle Calica-St