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(
  <div>
    {itemlisting()}
  </div>
)

解决方案2：（或）您可以更改itemlisting，如下所示。它不需要是一个功能。只是一个数组。

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

React map函数不返回对象数组中的项

1 个答案: