繁体   English   中英

使用.map (ReactJS) 比较 Arrays

[英]Comparing Arrays using .map (ReactJS)

在我的项目中,我从 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")

它只呈现网站设计课程,所以我认为这条线有问题。

任何帮助,将不胜感激。

您在问题所在的位置是正确的:

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 的课程。”

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM