Question

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

NavBar代码：

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>
  )
}

为什么使用导入的functon会导致无效的挂钩错误？

1 个答案: