React 和地图功能

Question

所以我有2个组件
导航栏组件
和导航链接组件
我正在尝试将导航链接名称作为道具从导航栏组件传递到导航链接组件
而且我不明白为什么一旦我尝试对我在导航链接组件中获得的对象数组使用地图函数，我就会不断收到错误消息

所以我的问题是什么原因？我错过了什么？

我一直收到这个错误：

TypeError: Cannot read properties of undefined (reading 'map')

NavBar 组件

import React from "react";
import "./navbar.styles.scss";
import Logo from "../../logo.png";
import NavActionButton from "../navbar/navbar-action-buttons/nav-icons.component";
import NavLinks from "../navbar/nav-item/nav-links.component";

const Navbar = () => {
  const menusItems = [
    {
      id: 775464,
      title: "ראשי",
    },

    {
      id: 77542,
      title: "אודות",
    },

    {
      id: 7751464,
      title: "החנות התבלינים  ",
    },

    {
      id: 77364,
      title: "קטגוריות",
    },

    {
      id: 7777364,

      title: "צור קשר",
    },
  ];

  return (
    <div className="navbar_container">
      <div className="navbar_items">
        <NavActionButton></NavActionButton>
        <NavLinks menusItems={menusItems}></NavLinks>
        <div className="logo_container">
          <img className="logo" src={Logo} alt="" />
        </div>
      </div>
    </div>
  );
};

export default Navbar;

NavLinks 组件

import React from "react";
import "./nav-links.styles.scss";

const NavLinkes = (props) => {
  const { direction, display, menusItems } = props;

  const styles = {
    display: display,
    flexDirection: direction,
  };

  return (
    <div className="navbar_links">
      <ul style={styles}>
        {menusItems.map(({ title, id }) => {
          console.log(title);
          return (
            <li key={id} className="link_item">
              <a className="link" href="">
                {title}
              </a>
            </li>
          );
        })}
      </ul>
    </div>  
  );
};

export default NavLinkes;

我在导航链接组件中尝试了控制台日志，我可以看到我从导航栏传递到导航链接组件的道具按预期显示
当我映射它时，我可以在控制台日志中看到数据
在地图函数中，但看起来地图函数没有渲染它

当将 menuItems 数组直接放在 navlinks 组件中时它也可以工作（就像常量而不是道具一样）

Answer 1

您可以改为对 Navbar 组件尝试这个（加上您拥有的所有其他东西，我只是作为一个例子变得更简单并且它工作得很好）：

import React from 'react'
import NavLinkes from './NavLinkes';

export const Navbar = () => {
  const menusItems = [
    {
      id: 775464,
      title: "ראשי",
    },

    {
      id: 77542,
      title: "אודות",
    },

    {
      id: 7751464,
      title: "החנות התבלינים  ",
    },

    {
      id: 77364,
      title: "קטגוריות",
    },

    {
      id: 7777364,

      title: "צור קשר",
    },
  ];


  return (
    <div>
      <div className="navbar_container">
        <NavLinkes menusItems={menusItems} />
    </div>
    </div>
  )
}

export default Navbar;

这是你的链接

import React from "react";

const NavLinkes = ({menusItems}) => {


  return (
    <div className="navbar_links">
      <ul>
        {menusItems.map(({ title, id }) => {
          console.log(title);
          return (
            <li key={id} className="link_item">
              <a className="link" href="">
                {title}
              </a>
            </li>
          )
        })}
      </ul>
    </div>  
  );
};

export default NavLinkes;

Answer 2

尝试这样做

return (
    <div className="navbar_links">
      <ul style={styles}>
        {menusItems.map((item) => {
          console.log(item.title);
            <li key={item.id} className="link_item">
              <a className="link" href="">
                {item.title}
              </a>
            </li>
        )}
      </ul>
    </div>  
  );