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

Question

在我的项目中，我从 Firestore 读取 2 个数组。

courseList - 用户注册的类(class)列表

类(class) - 项目中所有可用类(class)的列表

我想使用 .map 来比较这些类(class)，以便在我的类(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 属性。数组本身不会(尽管有趣的是，它可以)。

您似乎正在尝试做的是提取完整的类(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)。”