创建React网站并集成Hooks时遇到编译及ESLint错误求助

让我一步步帮你解决这些编译和ESLint错误，顺便修正代码里的其他潜在问题：

1. 解决Body组件导出错误 #

ERROR in ./src/App.js 12:35-39
export 'default' (imported as 'Body') was not found in './components/Body' (module has no exports)

这个问题出在你的Body.js文件里，分两种情况修复：

• 如果你在App.js里用了import Body from './components/Body'这种默认导入，那必须在Body.js的末尾添加默认导出：

// 在Body.js的最后加上
export default Body;

• 如果你在Body.js里用的是命名导出（比如export const Body = () => {...}），那App.js里的导入要改成：

import { Body } from './components/Body';

2. 解决React Hook调用规则错误 #

ERROR [eslint] src\components\Body.js Line 8:33:
React Hook "useState" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function react-hooks/rules-of-hooks

这是核心问题：React Hooks必须在React函数组件内部或者自定义Hook函数里调用，你现在把useState放在了文件顶层，完全违反了Hook的规则。

同时你的代码还有几个细节问题需要修正：

• React事件属性是驼峰命名，onclick要改成onClick
• alert.show()是错误用法，直接用原生alert()即可
• getTronWeb是异步函数，直接赋值curweb会得到Promise对象，必须用await获取实际返回值
• 按钮必须放在组件的JSX返回值里，不能直接在文件顶层

修正后的完整代码示例 #

把所有逻辑放进标准的React函数组件中：

import { useState } from "react";
const TronWeb = require("tronweb");

// 标准React函数组件
const Body = () => {
  // 在组件内部调用useState，符合Hook规则
  const [lpLogged, setlpLogged] = useState(true);

  async function getTronWeb() {
    if (window.tronWeb && window.tronWeb.defaultAddress.base58) {
      return window.tronWeb;
    }
    return null;
  }

  async function initWindow() {
    // 用await获取异步函数的实际返回值
    const curweb = await getTronWeb();
    if (curweb === null) {
      setlpLogged(false);
      alert("We were unable to find any suitable provider.");
    } else {
      setlpLogged(true);
    }
  }

  // 返回JSX内容，按钮放在组件内部
  return (
    <button onClick={initWindow}>Can you get tronweb from tronlink?</button>
  );
};

// 添加默认导出，解决第一个导出错误
export default Body;

这样修改后，两个错误应该都能解决，代码也能正常运行了。

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