为什么使用导入的函数会导致无效的钩子错误？

Question

我正在尝试构建一个导航栏作为仪表板页面的一部分。仪表板按预期运行，直到我尝试通过导入和调用该函数来包含导航栏。我知道包含函数调用时会出现错误，但不确定我做错了什么。

导航条码：

imports ...

export const NavItems = () => (
 <div>
    <ListItem button>
        <ListItemIcon>
            <DashboardIcon />
        </ListItemIcon>
        <ListItemText primary="Dashboard" />
    </ListItem>
    ...
 </div>
)

仪表板代码：

import React from 'react';
import List from '@material-ui/core/List'
import {NavItems} from './NavBar'

export default function App() {
return (
  <div class="grid-container">
     ...
     <aside class="sidenav">
       <List>
         <NavItems />
       </List>
     </aside>
     ...
  </div>
 );
}

我希望导航栏包含在站点的左侧面板中，但却收到以下错误：“无效的挂钩调用。挂钩只能在函数组件的主体内部调用。这可能发生在一个原因如下：..."

Answer 1

你忘了通过设置箭头函数让它成为一个函数组件。

export const NavItems = () => (
  <div>
    <ListItem button>
      <ListItemIcon>
        <DashboardIcon />
      </ListItemIcon>
      <ListItemText primary="Dashboard" />
    </ListItem>
    ...
  </div>
)

或者使用函数声明：

export function NavItems() {
  return (
    <div>
      <ListItem button>
        <ListItemIcon>
          <DashboardIcon />
        </ListItemIcon>
        <ListItemText primary="Dashboard" />
      </ListItem>
      ...
    </div>
  )
}