反应映射“TypeError：无法读取未定义的属性‘map’”

Question

下面是 Navbar.js 和 MenuItems.js 错误是 https://1drv.ms/u/s!ArTg3PgWw2jtgQ77RY23uF1tkSoA?e=YDsLlK 我从数组 MenuItems.js 中提取数据并在 Navbar.js 中使用地图显示，错误是“TypeError：无法读取未定义的属性“地图””。 为什么会出现这种情况？

  import React, { Component } from 'react'
import { MenuItems } from './MenuItems'

class Navbar extends Component {
render () {
    return (
        <nav className="NavbarItems">
            <h1 className="NavbarLogo">React</h1>
        <div className="menu-icon">

        </div>
        <ul>
        {MenuItems.map((item, index) => {
            return (
         <li key={index}>
             <a className={item.cName} href={item.url}>
                {item.title}


</a>
                 </li>

            )
        })}
        
        </ul>
        </nav>
    )
}

}

导出默认导航栏；

menuitems.js

    const MenuItems = [
{
    title:'Home',
    url:'/',
    cName:'nav-links',
},
{
    title:'Services',
    url:'services',
    cName:'nav-links',
},
{
    title:'Products',
    url:'products',
    cName:'nav-links',
},
{
    title:'Contact Us',
    url:'contact-us',
    cName:'nav-links',
},
{
    title:'Sign Up',
    url:'sign-up',
    cName:'nav-links-mobile',
},
]

Answer 1

是的，就是这么简单。您只需从

MenuItems

文件中导出

MenuItems.js

，如下所示：

export const MenuItems =[{}, {}];