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;