使用.map (ReactJS) 比較 Arrays

Question

在我的項目中，我從 Firestore 讀取了 2 個 arrays。

courseList - 用戶注冊的課程列表

課程- 項目中所有可用課程的列表

我想使用 a.map 比較這些，以便在我的課程門戶中，僅呈現用戶注冊的課程。

這是 arrays 的樣子：

課程列表：

培訓班

我知道 arrays 工作，但是，.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屬性。 數組本身沒有（盡管有趣的是，它可以）。

似乎您正在嘗試做的是提取完整的課程數據（來自課程），但僅過濾到用戶擁有的數據。 在這種情況下，您必須遍歷一個列表，查看每個項目的另一個列表。 您想要的是filter （或者，更強大的是reduce ），但可能不是map 。

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

您會注意到我重命名了變量，以明確每個部分使用了兩個列表中的哪一個。

外部 function filter將返回一個新數組，該數組僅包含那些在回調 function 中返回“true”的項目。

內部回調 function some循環遍歷另一個數組（學生注冊的課程），如果找到任何符合給定條件的數組，則返回 true。

所以在英語中，“過濾這個所有課程的列表，只給我返回在學生注冊的課程列表中具有匹配 ID 的課程。”

Answer 2

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

您可以通過檢查每個course是否包含在courseList數組中來過濾courses數組，將 URL 與courseList元素的CourseCode屬性匹配。 array.prototype.some用於迭代課程列表並檢查至少一個courseList項是否匹配。 過濾后，您可以按照正常情況對過濾結果進行 map。

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>
    );
  })}