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",
        },
    ]

我的控制台日志 returns 我想要的两个值很好，但是我没有列表项呈现到 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() );

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

React - .map not returning items in object

javascript

reactjs