Return .map 中的语句未呈现

Question

我在 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 工作正常并显示正确的数据，所以到目前为止一切都很好，但由于某种原因 <li> 元素在 return 语句未呈现到页面。我知道这与 <li> 标签的内容无关，因为它甚至不会呈现带有简单文本节点的简单元素。

我确定我在这里遗漏了一些明显的东西，但我费尽心机试图找出答案。任何帮助将不胜感激！

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

Answer 1

您的 courseData.courses[0].levels.map 调用 return 一个 undefined 的数组，因为在您作为外部映射参数传递的函数中没有 return 语句。您需要 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>

Answer 2

您没有定义外部 map 的 return 值：

levels.options.map(index => {

尝试添加 return 语句：

return levels.options.map(index => {

Return .map 中的语句未呈现

Return statement within .map not rendering

javascript

jsx

reactjs