.map()在reactJs中没有返回任何东西

Question

我是新的反应，我试图添加渲染项目列表从外部SidebarData.js文件(在相同的根/组件/..)我不确定为什么我的map函数没有返回任何东西。我得到一个正确的元素列表，但是项目。标题和项目。路径似乎不渲染…

我觉得道具有点问题。

我试着只写

render(){
<h1>{SubmenuData[1].title}</h1>
}

，它工作得很好，但是当我试图映射到整个数组时，它似乎没有渲染任何东西。它呈现了正确数量的元素，但是标题和路径没有返回…

这是我的两个组件:侧边栏(主)

import React from 'react'
import styled from 'styled-components'
import { SidebarData } from './SidebarData'
import Submenu from './Submenu'
const Nav = styled.div`
background: #f5f5f5;
color: #7d7d7d;
display:flex;
justify-content:flex-start;
height:100%;
width:15%;

`
const Sidebar = () => {
return (
<>
<Nav>
{SidebarData.map((item, index)=>{
return <Submenu item={item} key={item.index} />
})}
</Nav>
</>
)
}
export default Sidebar (Where i think there's a problem)

和子菜单

import React, { Component } from 'react'
import styled from 'styled-components'
import { Link } from "react-router-dom"
const SidebarLink = styled(Link)`
display: flex;
color: #404040;
`
const SidebarLabel = styled.span`
color:#000;
`
const Submenu = (item)=>{
return (
<SidebarLink to={item.path} >
<SidebarLabel>{item.title}</SidebarLabel>
</SidebarLink>
)
}
export default Submenu

Answer 1

我猜你接收道具的方式是错误的。像这样解构道具:

const Submenu = ({item})=>{
return (
<SidebarLink to={item.path} >
<SidebarLabel>{item.title}</SidebarLabel>
</SidebarLink>
)
}
export default Submenu