React Map函数未从对象数组返回项目

Question

我创建了一个包含对象的数组，我想使用map函数遍历它并返回该数组中的项目。 由于某些原因，这些物品没有退货。 我不知道我在做什么错。

const SideNavItem = () => {
  const items = [
    {
      icon: 'home',
      link: '/',
      name: 'Home',
    },
    {
      icon: 'apple',
      link: '/',
      name: 'About',
    },
    {
      icon: 'angelist',
      link: '/',
      name: 'Support',
    },
  ];

  const itemlisting = () => {
    return items.map((item, i) => {
      return (
        <div key={i}>
          <Link to={item.link}>
            <FontAwesome name={item.icon} />
            {item.name}
          </Link>
        </div>
      );
    });
  };

  return <div>{itemlisting}</div>;
};

export default SideNavItem;

Answer 1

知道...！

解决方案1：您已将项目itemlisting定义为功能。 您已定义它，但未在return语句中调用它。 因此，您必须具有如下的return语句。

return(
  <div>
    {itemlisting()}
  </div>
)

解决方案2：（OR）您可以按以下方式更改项目itemlisting 。 它不必是一个函数。 只是一个数组。

const itemlisting = items.map((item, i) => {
  return (
    <div key={i}>
      <Link to={item.link}>
        <FontAwesome name={item.icon} />
        {item.name}
      </Link>
    </div>
  );
});