使用 .map 比较数组 (ReactJS)

Question

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

courseList - 用户注册的课程列表

课程 - 项目中所有可用课程的列表

我想使用 .map 比较这些，以便在我的课程门户中，只呈现用户注册的课程。

这是数组的样子：

课程列表：

课程

我知道数组有效，但是 .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")

它只渲染了网站设计课程，所以我认为这行有问题。

如有任何帮助，我们将不胜感激。

Answer 1

你说的对，问题所在：

course.courseUrl === courseList.CourseCode

在这种情况下，course 是列表中的单个项目，具有属性 courseUrl。没关系。但是 courseList 是一个项目数组，每个项目 都有一个 CourseCode 属性。 Array 本身没有（尽管有趣的是，它可以）。

您似乎想做的是（从课程中）提取完整的课程数据，但仅过滤到用户拥有的数据。在这种情况下，您必须遍历一个列表，为每个项目查找另一个列表。您想要的是 filter（或者更强大的 reduce），但可能不是 map.

const filteredCourses = availableCourses.filter( availableCourse => studentsCourses.some( studentsCourse => studentsCourse.id === availableCourse.id ) );

您会注意到我重命名了变量，以明确每个部分使用了两个列表中的哪一个。

外部函数 filter 将 return 一个新数组，其中仅包含回调函数中 return 'true' 的那些项目。

内部回调函数 some 遍历另一个数组（学生注册的课程），如果找到 any 匹配给定的 returns true条件。

所以在英语中，“过滤所有课程的列表，只返回学生注册课程列表中具有匹配 ID 的课程。”

Answer 2

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

您可以通过检查每个 course 是否包含在 courseList 数组中，将 URL 与 courseList 元素匹配来过滤 courses 数组CourseCode属性。 array.prototype.some 用于迭代课程列表并检查至少一个 courseList 项匹配。过滤后，您可以按正常方式映射过滤结果。

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

...

{courses
  .filter(({ courseUrl }) => 
    courseList.some(({ CourseCode }) => CourseCode === courseUrl)
  )
  .map((course) => {
    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>
    );
  })}

使用 .map 比较数组 (ReactJS)

Comparing Arrays using .map (ReactJS)

javascript

reactjs

map-function