reactJs 中的 .map() 没有返回任何内容答案

【问题标题】：.map() in reactJs is not returning anythingreactJs 中的 .map() 没有返回任何内容
【发布时间】：2021-10-02 00:23:57
【问题描述】：

我是新手，我正在尝试从外部 SidebarData.js 文件（在同一根 /components/..）中添加渲染项目列表我不确定为什么我的地图功能没有返回任何东西。我得到了一个正确的元素列表，但 item.title 和 item.path 似乎没有呈现......

感觉道具有问题。

我试着写了

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

【问题讨论】：

你能控制台日志SidebarData吗？它是什么样子的
@Toxnyc 它返回正确的输出：数组
尝试将这一行 const Submenu = (item)=> 更改为 const Submenu = ({item}) => React 中的函数组件接受一个名为 props 的参数。如果你想访问你的道具，你需要调用 props.item 或直接在箭头函数中破坏道具，就像我建议的更改一样。
@ElMehdiJilali 尝试替换 - (item)=>{ WITH (this.props.item)=>{ 在子菜单中

标签： reactjs functional-programming components jsx react-props

【解决方案1】：

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

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

export default Submenu

【讨论】：