React Native macOS Invalid hook call错误排查及代码优化咨询

错误信息 #

错误：无效的Hook调用。Hooks只能在函数组件的主体内部调用。可能的原因如下：

1. React与渲染器（如React DOM）版本不匹配
2. 违反了Hooks的使用规则
3. 应用中存在多个React副本

依赖配置 #

{
    "react": "18.2.0",
    "react-native": "0.71.13",
    "react-native-childprocess": "^0.1.4",
    "react-native-macos": "^0.71.0-0"
}

问题代码 #

function shell(pwd, cmd) {
    return useCallback(async (pwd, cmd) => {
      return await new Promise((resolve, reject) => {
        const data = spawn('/bin/sh', ['-c', cmd], { pwd,
          stdout: (o) => resolve(o),
          stderr: (o) => reject(o),
          terminate: (o) => o,
        });
        console.log(data)
      });
    }, [pwd, cmd]);
  }

let a = shell('/Users/', 'ls')
      .then(a => console.log("a", a))
      .catch(console.error)
      .finally(a => console.log("b", a));

错误原因分析 #

核心问题是违反了React Hooks的使用规则：

• useCallback是React Hook，只能在函数组件的顶层作用域或自定义Hook的顶层作用域中调用，不能放在普通函数内部，更不能在组件外部直接调用包含Hook的函数。
• 你把useCallback放在了普通函数shell里，还直接在全局作用域调用shell，完全不符合Hooks的调用要求。

修复及优化方案 #

方案1：改为普通异步工具函数（无需Hook） #

如果只是需要一个执行shell命令的工具函数，根本不需要用useCallback，直接写一个返回Promise的异步函数即可：

async function shell(pwd, cmd) {
  return new Promise((resolve, reject) => {
    spawn('/bin/sh', ['-c', cmd], {
      pwd,
      stdout: (o) => resolve(o),
      stderr: (o) => reject(o),
      terminate: (o) => o,
    });
  });
}

// 调用方式不变
shell('/Users/', 'ls')
  .then(a => console.log("a", a))
  .catch(console.error)
  .finally(() => console.log("b"));

方案2：在组件内使用时正确封装Hook #

如果这个函数要在React组件内使用，需要优化成自定义Hook的形式，确保遵守Hooks规则：

// 自定义Hook，命名以use开头
function useShell() {
  // useCallback放在Hook顶层，依赖项为空（无需依赖外部变量）
  const executeShell = useCallback(async (pwd, cmd) => {
    return new Promise((resolve, reject) => {
      spawn('/bin/sh', ['-c', cmd], {
        pwd,
        stdout: (o) => resolve(o),
        stderr: (o) => reject(o),
        terminate: (o) => o,
      });
    });
  }, []);

  return executeShell;
}

// 在函数组件内使用
function MyComponent() {
  const executeShell = useShell();

  const runCommand = async () => {
    try {
      const result = await executeShell('/Users/', 'ls');
      console.log("a", result);
    } catch (err) {
      console.error(err);
    } finally {
      console.log("b");
    }
  };

  return <Button onPress={runCommand}>执行命令</Button>;
}

额外检查项 #

• 版本匹配：你的React和React Native版本是兼容的（React 18.2.0对应RN 0.71.x），版本不匹配的可能性可以排除。
• 多React副本：执行npm ls react或yarn list react检查项目中是否存在多个React实例，如有需要清理依赖缓存或调整依赖结构。

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