Javascript .map中的Return语句未呈现
我在React组件中有两个嵌套的.map函数,它们似乎工作得很好,但由于某些原因,最终映射的return语句中的jsx没有呈现 代码如下:Javascript .map中的Return语句未呈现,javascript,reactjs,jsx,Javascript,Reactjs,Jsx,我在React组件中有两个嵌套的.map函数,它们似乎工作得很好,但由于某些原因,最终映射的return语句中的jsx没有呈现 代码如下: <ul className={`dropdown-menu ${styles.stretch} ${styles.dropdown}`}> { courseData.courses[0].levels.map(levels => { if (levels.id === props.select
<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>
{
courseData.courses[0].levels.map(levels=>{
如果(levels.id==props.selectedLevel){
levels.options.map(索引=>{
console.log(索引)
返回(
-
//这里有更多的内容。。。
)//返回
})//levels.options.map()
}//如果(…)
})//courseData…map()
}
嵌套的.map()
中的console.log
工作正常并显示正确的数据,因此到目前为止一切正常,但由于某些原因,return语句中的
元素没有呈现到页面。我知道这与
标记的内容无关,因为它甚至不会用简单的文本节点呈现简单的元素
我肯定我错过了一些显而易见的东西,但我还是拼命想弄清楚。任何帮助都将不胜感激
顺便说一句,该列表是一个引导下拉按钮列表-不确定这是否是部分原因。您的
courseData.courses[0].levels.map
调用返回一个未定义的数组,因为在作为外部映射参数传递的函数中没有返回语句。您需要返回语句,如下所示:
<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>
{
courseData.courses[0].levels.map(levels=>{
如果(levels.id==props.selectedLevel){
返回级别.options.map(index=>{/您没有定义外部
映射的返回值:
levels.options.map(index => {
尝试添加返回语句:
return levels.options.map(index => {
尝试从外部映射返回内部映射:returnlevels.options.map
如果使用它编写map
和的组合更好,请尝试添加一个return语句: