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

Question

我是React的新手。 我正在组合一个组件，该组件将基于数组重复列出项以获取一组导航选项。 我收到错误：渲染未返回任何内容。 这通常意味着缺少return语句。 或者，不渲染任何内容，则返回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

您错过了return 。 您还必须返回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;

Answer 2

您缺少这部分的主要回报

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

更改为（我想您将需要一个<div>来包装<li> ）

return (<div>{navOptions.map(....