React跨JS文件调用函数触发无效Hook调用错误排查

1. 点击按钮打印def而非abc的原因 #

你在file1里写的import test from './file2.js'，实际导入的是file2里默认导出的函数。看file2代码，export default function irrelevant()才是默认导出的内容，而function test()只是个未导出的普通函数，根本没被导入到file1里。所以点击按钮时执行的是irrelevant函数，自然会打印def。

2. Invalid hook call错误的根源 #

这个错误是因为irrelevant函数里应该用了React钩子（比如useState、useEffect这类），但你把它当成普通函数直接在onClick里调用了。React钩子有严格的使用规则：只能在React组件函数的顶层调用，不能在普通函数、循环或者条件判断里调用。直接调用带钩子的函数，违反了这个规则，所以触发错误。

3. 实现「点击按钮清空页面并运行另一个JS文件」的正确步骤 #

第一步：修正导入逻辑，确保调用正确函数 #

先把file2里的test函数正确导出：

// file2.js
export function test(){
  console.log("abc");
}

export default function irrelevant() {
  console.log("def");
  // 这里如果有React钩子，只能作为组件渲染时使用，不能直接调用
}

然后在file1里正确导入test（注意用大括号，因为是命名导出）：

// file1.js
import { test } from './file2.js'
function App(){
  // ...
  return (
    <div className="App">
      <button onClick={handlePress}>pressme</button>
    </div>
  );
}

第二步：编写清空页面并加载新JS的逻辑 #

在App组件里添加点击处理函数，实现清空页面+动态加载JS的功能：

// file1.js完整代码示例
import { test } from './file2.js'

function App(){
  const handlePress = () => {
    // 清空整个页面内容
    document.body.innerHTML = '';
    // 动态创建script标签加载目标JS文件，替换成你的实际文件路径
    const newScript = document.createElement('script');
    newScript.src = './your-target-script.js';
    // 可选：监听脚本加载完成事件
    newScript.onload = () => {
      console.log('新JS文件加载完成，开始执行');
    };
    // 将脚本添加到页面，触发加载执行
    document.body.appendChild(newScript);
  };

  return (
    <div className="App">
      <button onClick={handlePress}>pressme</button>
    </div>
  );
}

export default App;

注意点 #

• 如果你的目标JS依赖React或其他第三方库，要确保这些库已经在页面中加载，或者在动态加载时一并处理。
• 清空document.body.innerHTML会彻底移除当前React应用的所有DOM节点和事件，终止现有React应用，完全符合你清空页面的需求。

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