将数组作为参数传递给样式组件功能

Question

我正在尝试使用样式化的组件构建补充工具栏。我有一个Header（常规reactJS组件），它创建了一个补充工具栏（带样式的组件）。它在创建边栏时传递供边栏组件使用的NavItems的名称列表。但是，补充工具栏内的名称数组会引发未定义的错误。

我试图在补充工具栏中定义一个示例数组，而不是从Header传递它，然后代码运行良好。但是，当同一数组来自Header时，它将失败。我尝试使用props.items，但仍然无法正常工作。

Header.js

const navItems = [{ name: 'item 1' }, { name: 'item2' }];
const Header = () => (
    <div>
        <Sidebar navItems={navItems}></Sidebar>
        <Image src={wave}></Image>
    </div>
  );
export default Header;

Sidebar.js

const Nav = styled.nav`
 height: 100%;
  width: 180px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #edf2f7  ;
  overflow-x: hidden;
  padding-top: 20px;`
;
const NavLink = styled.a`
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
&:hover {
 color:  #fc721d;
}
`;
function Sidebar ({navItems}) {
      const itemList = navItems.map(item => (
        <NavLink>{navItems.name}</NavLink> 
      ));
  return (
    <Nav>{itemList}</Nav>
  );
}
export default Sidebar;

当我不将数组作为props传递，而是在内部对其进行定义时，代码可以正常工作

function Sidebar () {
    const navItems = [{ name: 'item 1' }, { name: 'item2' }];
      const itemList = navItems.map(item => (
        <NavLink>{item.name}</NavLink> 
      ));
  return (
    <Nav>{itemList}</Nav>
  );
}
export default Sidebar;

预期结果：侧栏带有项1和项2作为导航项。

Expected result