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引擎只会假设你忘了;

请参阅以下示例，其中您将期望两次问候世界，但是获得undefined一次

更好的解释是here

自动分号插入
return语句受自动分号插入（ASI）的影响。 return关键字和表达式之间不允许使用行终止符。

＆＃13;

function testFunctionIncorrect() {
  return
    "hello world";
}

function testFunctionCorrect() {
  return "hello " + 
    "world";
}

console.log( testFunctionIncorrect() );
console.log( testFunctionCorrect() );

＆＃13;

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

1 个答案: