无效的挂钩调用顶部功能组件

Question

我正在尝试在我的16.14.00 react App中使用Hooks。但是每次使用一个钩子，我都会收到无效的钩子警告：“ https://fr.reactjs.org/warnings/invalid-hook-call-warning.html”。

我检查了：

• 我的通话没有任何条件限制
• “ useState”调用位于函数的顶部。
• 我只有一个反应版本。

奇怪的是，我可以在其他组件中使用Hook，就像React在我的App（）功能组件上不接受钩子一样。

这是我的代码。

import { useState } from 'react';
import Cursor from './cursor';
import CollapsiblePanel from './collapsiblePanel';
import MainPanel from './mainPanel';
import SideBar from './sidebar/sidebar';


export default function App() {
  
    const [cursorGlowing, setCursorGlowing] = useState(false);
    
    const glowCursor = (bool) => {
      setCursorGlowing(false);
    }

    return (
      <div className="app">
        <SideBar glowCursor={() => glowCursor}/>
        <Cursor glow={cursorGlowing}/>
        <CollapsiblePanel/>
        <MainPanel />
      </div>
    )
  }

如果有人已经克服了这个问题，或者如果我误解了任何内容，请纠正我:) 感谢您的时间。

编辑： 我正在我的index.js中使用此应用程序：

import App from './app'
import ReactDOM from 'react-dom';
import '../public/css/MyStyle.css';
import '../public/css/nav.css';

  
  ReactDOM.render(
    App(),
    document.getElementById('root')
  );```

Answer 1

当您执行App()时，您就像是在正常功能一样调用它，而不是将其作为React组件。当React看到App的调用时，它无法检测到它被用作功能组件-它只是认为这是一个正常函数。使用JSX语法代替调用App：

ReactDOM.render( <App />, document.getElementById('root') );

（您也可以使用React.createElement，但是JSX语法要容易得多）