React中如何从独立文件更新useState状态？解决Hook调用错误

问题根源 #

• Hook调用违反规则：你在onClick事件回调里调用useSetHero，React要求Hook必须在组件或自定义Hook的顶层调用，不能嵌套在回调、循环或条件逻辑中，这是报错的直接原因。
• 自定义Hook逻辑错误：你的useSetHero把useState放在UpdateHero函数内部，每次调用UpdateHero都会新建一个独立的局部状态，完全无法实现跨组件状态共享。

正确解决方案：用React Context实现全局状态共享 #

要让两个独立文件的组件共享并同步状态，React Context是最直接的解决方案，具体步骤如下：

1. 创建Hero状态Context #

新建HeroContext.js文件：

import { createContext, useContext, useState } from 'react';

// 创建Context容器
const HeroContext = createContext();

// 提供全局状态的Provider组件
export function HeroProvider({ children }) {
  const [hero, setHero] = useState(null); // 可根据需求设置初始状态

  // 统一的状态更新方法
  const updateHero = (newHero) => {
    setHero(newHero);
  };

  return (
    <HeroContext.Provider value={{ hero, updateHero }}>
      {children}
    </HeroContext.Provider>
  );
}

// 自定义Hook，简化组件获取状态的逻辑
export function useHero() {
  const context = useContext(HeroContext);
  if (!context) {
    throw new Error('useHero必须在HeroProvider内部使用');
  }
  return context;
}

2. 在应用顶层包裹Provider #

在根组件（比如App.js）中，用HeroProvider包裹所有需要共享状态的组件：

import { HeroProvider } from './HeroContext';
import Information from './information';
import HeroComponent from './hero'; // 假设hero.js中有展示状态的组件

function App() {
  return (
    <HeroProvider>
      <Information />
      <HeroComponent />
    </HeroProvider>
  );
}

export default App;

3. 在information.js中调用更新方法 #

import { useHero } from './HeroContext';

function Information() {
  const { updateHero } = useHero();
  // 假设这里有需要设置的hero数据
  const targetHero = { name: '钢铁侠', ability: '高科技装甲' };

  return (
    <button className="active" onClick={() => updateHero(targetHero)}>
      设置英雄
    </button>
  );
}

export default Information;

4. 在hero.js中访问共享状态 #

import { useHero } from './HeroContext';

function HeroComponent() {
  const { hero } = useHero();

  return (
    <div>
      当前选中英雄：{hero ? `${hero.name} - ${hero.ability}` : '未选择'}
    </div>
  );
}

export default HeroComponent;

方案说明 #

• Context提供了全局状态容器，所有被HeroProvider包裹的组件都能访问到同一个hero状态和updateHero方法。
• 调用updateHero会更新Context中的状态，所有依赖该状态的组件都会自动重新渲染，实现跨组件状态同步。
• 完全遵循React Hook规则，不会再出现之前的报错。

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