javascript - React Component Array Map - 渲染没有返回任何内容。这通常意味着缺少返回语句。或者，不渲染任何内容，返回 null

Question

我是 React 的新手。我正在组合一个组件，该组件将基于一组导航选项的数组重复列表项。我收到错误:渲染没有返回任何内容。这通常意味着缺少返回语句。或者，不渲染任何内容，返回 null。

这是我的组件:

import React from 'react';

const navOptions = [
  {name: 'Home'},
  {name: 'Me Mine and Ours'},
  {name: 'Collection'},
  {name: 'Yo!'}
];

const Nav = () => {
  navOptions.map((name, index) => {
    return (
      <li className="nav-item">
        <a className="nav-link" href="#" key="">j</a>
      </li>
    )
  })
};

export default Nav;

Answer 1

您缺少一个返回。您还必须返回 navOptions.map 的结果。

import React from 'react';

const navOptions = [
  {name: 'Home'},
  {name: 'Me Mine and Ours'},
  {name: 'Collection'},
  {name: 'Yo!'}
];

const Nav = () => {
  return navOptions.map((name, index) => {
    return (
      <li className="nav-item">
        <a className="nav-link" href="#" key="">j</a>
      </li>
    )
  })
};

export default Nav;