javascript - .map 中的返回语句不呈现

Question

我在 React 组件中有几个嵌套的 .map 函数，它们似乎工作正常，但由于某种原因，最终 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>

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

我确定我在这里遗漏了一些明显的东西，但我正在努力弄清楚。任何帮助将不胜感激!

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

Answer 1

您的 courseData.courses[0].levels.map 调用返回一个 undefined 数组，因为您作为外部 map 参数传递的函数中没有 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>