React中.map()渲染Sidebar列表无返回、属性不显示问题求助

• 子组件Submenu参数接收错误：React函数组件的第一个入参是完整的props对象，你当前直接用(item)作为入参，拿到的是包含item属性的整个props对象，而非你传递的item数据本身，所以item.path、item.title实际是取props对象上不存在的属性，自然为空。
• 主组件Sidebar存在key赋值错误：你在map中使用key={item.index}，但index是map遍历的第二个参数，item对象本身不存在index属性，虽然不影响当前字段渲染，但会触发React的key警告。

1. 修复Submenu组件的props接收 #

两种写法二选一即可：

写法1：直接解构props中的item属性 #

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

写法2：先接收完整props再提取item #

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

2. 修复Sidebar组件的key属性 #

将map遍历的key修改为合法的唯一值：

const Sidebar = () => {
    return (
        <>
            <Nav>
                {SidebarData.map((item, index)=>{
                    // 优先用item自带的唯一属性如path，没有的话再用index
                    return <Submenu item={item} key={item.path || index} />
                })}
            </Nav>
        </>
    )
}

内容的提问来源于stack exchange，提问作者El Mehdi Jilali