javascript - React - .map 不返回对象中的项目

Question

我是 React 的新手，我的 .map 函数有问题:

我有一个具有以下渲染功能的组件:

render() {
    return <div className="sidenav-cont"><ul className="top-level-menu">
            {
                this.props.loadSidenavItems.map((menuItem) => {
                    console.log(menuItem.parentCat)
                return              
                    (
                    <li key={menuItem.catId}>
                        <a href="#">{menuItem.parentCat}</a>
                    </li>
                    )
                })
            }

    </ul>
</div>
    }

这是我要映射的对象:

export default 
     [
            {
            catId:"parMenu1",
            parentCat:"Genres",
        },
        {
            catId:"parMenu2",
            parentCat:"Sound Type",
        },
    ]

我的控制台日志返回了我想要的两个值，这很好，但是我没有列表项被呈现到 DOM。不确定我哪里出了问题？

Answer 1

这可能有点愚蠢，但是 return 后面必须跟一个语句，否则许多 javascript 引擎会简单地假设您忘记了 ;

请看下面的例子，你会期待两次 hello world，但得到一次 undefined

给出了更好的解释here

Automatic Semicolon Insertion
The return statement is affected by automatic semicolon insertion (ASI). No line terminator is allowed between the return keyword and the expression.

function testFunctionIncorrect() {
  return
    "hello world";
}

function testFunctionCorrect() {
  return "hello " + 
    "world";
}

console.log( testFunctionIncorrect() );
console.log( testFunctionCorrect() );