javascript - 使用 .map (ReactJS) 比较数组

Question

在我的项目中，我从 Firestore 读取了 2 个数组。
类(class)列表 - 用户注册的类(class)列表
类(class) - 项目中所有可用类(class)的列表
我想使用 .map 比较这些，以便在我的类(class)门户中，只呈现用户注册的类(class)。
这是数组的样子:
类(class)列表:

类(class)

我知道数组有效，但是 .map 似乎不起作用!
这是我的代码:

const {courses} = this.state
const {courseList} = this.state

{
                

                  courses.length && courses.map (course => {
                    
                         if (course.courseUrl === courseList.CourseCode) {

                              return (
                                 <div className = "CourseTile" key = {course.courseName}>

                                   <div className = "CourseTitle">
                                        <h1> {course.courseName}</h1>
                                  </div>

                                  <div className = "CourseDescription">
                                        <p> {course.courseSummary}</p>
                                  </div>

                                  <Link to={`/course/${course.courseUrl}/courseinformation`}> <button className = "LetsGoButton"> Take course</button> </Link>

                                </div>
                              )
                        }

                          else return null;
                
                  }
                )
                

}

如果我更换

if (course.courseUrl === courseList.CourseCode)

和

if (course.courseUrl === "websitedesign")

它只呈现网站设计类(class)，所以我相信这条线有问题。
任何帮助，将不胜感激。

Answer 1

您对问题所在的位置是正确的:course.courseUrl === courseList.CourseCode在这种情况下 course是列表中的单个项目，具有属性 courseUrl .没关系。但是courseList是一个项目数组，每个有一个 CourseCode属性(property)。 Array 本身没有(尽管有趣的是，它可以)。
似乎您想要做的是提取完整的类(class)数据(来自类(class))，但仅过滤到用户拥有的数据。在这种情况下，您必须遍历一个列表，查看每个项目的另一个列表。您要的是filter (或者，更强大的是 reduce )但可能不是 map .const filteredCourses = availableCourses.filter( availableCourse => studentsCourses.some( studentsCourse => studentsCourse.id === availableCourse.id ) );您会注意到我对变量进行了重命名，以明确每个部分正在使用两个列表中的哪一个。
外函数filter将返回一个新数组，该数组仅包含在回调函数中返回 'true' 的那些项。
内部回调函数some循环遍历另一个数组(学生注册的类(class))，如果找到任何匹配给定条件的数组，则返回 true。
所以在英语中，“过滤所有类(class)的列表，只返回学生注册类(class)列表中具有匹配 ID 的类(class)。”