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

Question

I am new to React. I'm putting together a component that will repeat list items based on an array for a set of navigation options. I am getting the error: Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

This is my component:

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

You are missing a return . You have to return the result of navOptions.map as well.

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

You are missing the main return in this part

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

Change to (I think you will need a <div> to wrap the <li> s up)

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