.map 中的返回语句未呈现答案

【问题标题】：Return statement within .map not rendering.map 中的返回语句未呈现
【发布时间】：2016-09-02 14:12:17
【问题描述】：

我在 React 组件中有几个嵌套的 .map 函数，它们似乎工作正常，但由于某种原因，最终地图的 return 语句中的 jsx 没有呈现。

代码如下：

<ul className={`dropdown-menu ${styles.stretch} ${styles.dropdown}`}>
    {
        courseData.courses[0].levels.map(levels => {
            if (levels.id === props.selectedLevel){
                levels.options.map(index => {
                    console.log(index)
                    return (
                        <li key={index.number}>
                            //more content goes here...
                        </li>
                    ) //return
                }) //levels.options.map()
            } //if (...)
        }) //courseData...map()
    }
</ul>

嵌套的.map() 中的console.log 工作正常并显示正确的数据，所以到目前为止一切都很好，但由于某种原因，return 语句中的<li> 元素没有呈现到页面。我知道这与<li> 标签的内容无关，因为它甚至不会用简单的文本节点渲染简单的元素。

我确定我在这里遗漏了一些明显的东西，但为了弄清楚它而扯掉了我的头发。任何帮助将不胜感激！

顺便说一句，该列表是一个引导下拉按钮列表 - 不确定这是否可能是部分原因。

【问题讨论】：

尝试从外部映射返回内部映射：return levels.options.map
map 和if 的组合最好使用filter 编写

标签： javascript reactjs jsx

【解决方案1】：

您的courseData.courses[0].levels.map 调用返回一个undefined 数组，因为在作为外部映射参数传递的函数中没有返回语句。你需要 return 语句，像这样：

<ul className={`dropdown-menu ${styles.stretch} ${styles.dropdown}`}>
    {
        courseData.courses[0].levels.map(levels => {
            if (levels.id === props.selectedLevel){
                return levels.options.map(index => { // <- this one
                    console.log(index)
                    return (
                        <li key={index.number}>
                            //more content goes here...
                        </li>
                    ) //return
                }) //levels.options.map()
            } //if (...)
        }) //courseData...map()
    }
</ul>

【讨论】：

【解决方案2】：

你没有定义外部map的返回值：

levels.options.map(index => {

尝试添加return语句：

return levels.options.map(index => {

【讨论】：

它有帮助.. "尝试添加一个返回语句："