React：如何从非组件函数设置Context？遇无效Hook调用错误

错误原因 #

你触发的Invalid hook call错误，核心原因是自定义钩子UseErrorContext基于React的useContext实现，而React钩子只能在函数组件或其他自定义钩子的顶层调用，不能在普通异步函数（比如你的MyFunction）里执行。另外直接给errorMessage赋值也无效——如果它是状态变量，必须用对应的更新方法修改，否则不会触发组件重渲染。

修正方案 #

1. 完善Context的状态管理 #

首先在Provider所在组件（App.js）里，用useState管理错误信息，并把更新方法也传入Context的value中：

import { useState } from 'react';
import { ErrorContext } from './你的Context文件路径';

function App() {
  // 用useState管理错误信息，提供更新方法
  const [errorMessage, setErrorMessage] = useState('');

  return (
    <ErrorContext.Provider value={{ errorMessage, setErrorMessage }}>
      {/* 你的子组件树 */}
    </ErrorContext.Provider>
  );
}

2. 调整普通函数的调用方式 #

不要在MyFunction里调用钩子，而是将setErrorMessage作为参数传入函数，直接在函数里调用这个更新方法：

export const MyFunction = async (id, setErrorMessage) => {
  try {
    // 这里写你的异步业务逻辑，比如请求接口
    // 模拟出错场景
    throw new Error('SOME ERROR MESSAGE');
  } catch (err) {
    // 调用Context传入的更新方法设置错误信息
    setErrorMessage(err.message);
  }
};

3. 在组件中调用函数 #

在需要调用MyFunction的组件里，先通过自定义钩子获取setErrorMessage，再传入函数：

import { UseErrorContext } from './你的Context文件路径';
import { MyFunction } from './你的函数文件路径';

function TargetComponent() {
  const { setErrorMessage } = UseErrorContext();

  const handleExecute = async () => {
    await MyFunction(/* 传入id参数 */123, setErrorMessage);
  };

  return <button onClick={handleExecute}>执行操作</button>;
}

额外优化方案 #

如果你的业务逻辑需要频繁复用这套错误处理逻辑，也可以把MyFunction封装成自定义钩子，这样就能直接在钩子内部调用UseErrorContext：

import { UseErrorContext } from './你的Context文件路径';

export const useMyFunction = () => {
  const { setErrorMessage } = UseErrorContext();

  const execute = async (id) => {
    try {
      // 业务逻辑
      throw new Error('SOME ERROR MESSAGE');
    } catch (err) {
      setErrorMessage(err.message);
    }
  };

  return { execute };
};

然后在组件中使用：

import { useMyFunction } from './你的钩子文件路径';

function TargetComponent() {
  const { execute } = useMyFunction();

  return <button onClick={() => execute(123)}>执行操作</button>;
}

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