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>

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

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

顺便提一下，该列表是一个bootstrap下拉按钮列表 - 不确定这是否可能是部分责任。

Answer 1

您没有定义外部static_assert(contains_v<float, float, double>, "failure: float not among <float, double>"); // does not trigger static_assert(contains_v<int, float, double>, "failure: int not among <float, double>"); // triggers的返回值：

map

尝试添加一个return语句：

levels.options.map(index => {

Answer 2

您的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>

.map中的返回语句无法呈现

2 个答案: