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

Posted 2023-02-23

【中文标题】reactJs 中的 .map() 没有返回任何内容

【英文标题】：.map() in reactJs is not returning anything

【发布时间】：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)=> 在子菜单中

【参考方案1】：

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

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


export default Submenu