Question

下面是 Navbar.js 和 MenuItems.js 错误是 https://1drv.ms/u/s!ArTg3PgWw2jtgQ77RY23uF1tkSoA?e=YDsLlK 我从数组 MenuItems.js 中提取数据并在 Navbar.js 中显示地图，错误是“类型错误：无法读取未定义的属性‘地图’”。为什么会发生？

  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.js 文件中导出 MenuItems。就像这个

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

反应地图“类型错误：无法读取未定义的属性‘地图’”

1 个答案: