React Hooks技术问询：拆分组件到新JS文件后useContext无法复用？

我明白你遇到的困扰了——把LessonMenu拆分到单独文件后，原本的Context状态共享失效了，这大多是导入导出的细节或者组件树范围的问题，咱们一步步来排查修复：

可能的错误点&解决步骤 #

1. 确认Context的导入路径完全正确 #

你已经把ManagerContext改成了export const ManagerContext，这一步是对的，但要确保在新建的Menu.js里导入的是同一个Context实例。如果LessonManager.js和Menu.js在同一目录下，导入语句应该是：

import { ManagerContext } from './LessonManager';

如果路径写错（比如多了层级或者少了斜杠），会导致你拿到一个全新的Context实例，自然无法和原Provider共享状态。

2. 保证LessonMenu在Provider的包裹范围内 #

迁移后的LessonMenu必须位于ManagerContext.Provider的渲染树内部才能获取到上下文值。举个例子：

• 正确的用法：LessonMenu作为LessonManager的子组件（就像你原代码那样），或者在LessonManager的Provider覆盖的其他组件内部渲染。
• 错误的用法：直接在App组件里同时渲染<LessonManager />和<LessonMenu />，此时LessonMenu不在Provider范围内，会拿到Context的默认值null，调用state.toggleEditor就会报错。

3. 修正状态更新的写法（原代码的隐藏坑） #

原代码里的const [editing, toggleEditor] = React.useState(false);其实是把useState返回的setState函数命名为toggleEditor，但你在点击事件里写toggleEditor(!state.editing)，这种写法依赖当前的state.editing值，在异步更新场景下可能出问题。更可靠的方式是让toggleEditor自己处理状态翻转：

修正后的完整代码 #

LessonManager.js #

import React from 'react';
import LessonMenu from './Menu';

// 导出Context，供其他组件导入使用
export const ManagerContext = React.createContext(null);

export default function LessonManager() {
  const [title, setTitle] = React.useState('SomeOtherTitle');
  // 规范命名setState函数，避免混淆
  const [editing, setEditing] = React.useState(false);

  const value = React.useMemo(() => {
    return {
      title,
      setTitle,
      editing,
      // 直接在Context里定义好翻转状态的方法，组件调用时无需传参
      toggleEditor: () => setEditing(prev => !prev),
      log: (t) => console.log(t)
    }
  }, [title, editing]);

  return (
    <ManagerContext.Provider value={value}>
      <div className='box-default expand'>
        <div className='handle' style={{display: 'flex', justifyContent: 'center', width: '100%', cursor: 'grab'}}>
          <LessonMenu/>
        </div>
      </div>
    </ManagerContext.Provider>
  )
}

Menu.js #

import React from 'react';
import { ButtonGroup, IconButton, Icon } from 'rsuite';
// 正确导入同一个Context实例
import { ManagerContext } from './LessonManager';

export default function LessonMenu() {
  const state = React.useContext(ManagerContext);

  // 增加容错判断，防止拿到null时报错
  if (!state) {
    return null; // 也可以替换成加载提示或者空组件
  }

  return (
    <ButtonGroup size='sm'>
      <IconButton 
        className='rsuite-btn menu-button' 
        onClick={state.toggleEditor} // 直接调用Context里的方法，无需传参
        icon={<Icon icon={state.editing ? 'eye' : 'edit2'} />} 
      />
    </ButtonGroup>
  )
}

总结一下关键注意事项 #

• 始终确保所有使用Context的组件导入的是同一个Context实例，路径是核心检查点。
• 任何需要获取Context值的组件，必须被对应的Provider包裹。
• 状态更新尽量使用函数式更新（比如setEditing(prev => !prev)），避免依赖当前状态值导致的异步问题。

内容的提问来源于stack exchange，提问作者devamat