React Context值在点击处理器内未定义问题求助

嘿，我仔细扒了你的代码，发现几个大小写拼写错误和标签匹配问题，这正是导致你在点击处理器里拿不到Context值的核心原因！咱们一步步来修复：

1. Context 大小写不匹配（最关键问题） #

在你的myContext.js里，你创建的Context变量是大写的MyContext，但在Provider组件里误用了小写的myContext.Provider，而且导出的时候也用了小写的myContext——这会导致组件中导入的Context和实际提供的Context完全不是同一个对象，自然会出现值未定义的问题。

修正后的myContext.js代码： #

import React, { useState, createContext } from 'react';
// 保持变量名大小写一致
const MyContext = createContext([{}, () => {}]);
const MyContextProvider = (props) => {
  const [contextState, setContextState] = useState({
    userIsLoggedin: false,
    fName: '',
    lName: '',
    userName: ''
  });
  // 这里要使用大写的 MyContext.Provider
  return (
    <MyContext.Provider value={[contextState, setContextState]}>
      {props.children}
    </MyContext.Provider>
  );
};
// 导出时保持变量名和定义一致
export { MyContext, MyContextProvider };

2. App.js 中 Provider 闭合标签错误 #

你在App.js里用了</AuthContextProvider>来闭合，但实际包裹的是MyContextProvider，这会导致React的组件树结构异常，间接影响Context的传递。

修正后的app.js代码片段： #

import { MyContextProvider } from './MyContext';
return (
  <Router>
    <MyContextProvider>
      <div className='App'>
        <Component />
      </div>
    </MyContextProvider> {/* 这里改成正确的闭合标签 */}
  </Router>
);

3. 完善点击处理器的测试代码 #

你当前的点击处理器里没有实际打印Context值，修正后可以添加打印语句验证：

const [contextState, setContextState] = useContext(MyContext);
const clickHandler = (e) => {
  debugger;
  // 现在可以正常打印 Context 值了
  console.log('Context State:', contextState);
  console.log('Set Context State:', setContextState);
}
return (<button onClick={clickHandler}>Click me!</button>);

做完这些修改后，你应该就能在点击处理器里正常访问Context的值了！

内容的提问来源于stack exchange，提问作者Abhishek Dhanraj Shahdeo