Javascript 使用.map（ReactJS）比较数组

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

课程列表-用户注册的课程列表

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

我想使用.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;
                
                  }
                )
                

}

与

它只呈现网站设计课程，所以我相信这条线有问题

---

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

问题所在您是正确的：

course.courseUrl===courseList.CourseCode

在本例中，

course

是列表中的单个项目，具有属性

courseUrl

。那很好。但是

courseList

是一个项目数组，每个项目都有一个

CourseCode

属性。数组本身没有（有趣的是，它可以）

看起来您试图做的是提取完整的课程数据（来自课程），但只过滤到用户拥有的数据。在这种情况下，您必须循环浏览一个列表，查看每个项目的另一个列表。您需要的是

过滤器

（或者更有力的是

减少

），但可能不是

映射

const filteredCourses=availableCourses.filter（availableCourse=>studentsCourses.some（studentsCourse=>studentsCourses.id==availableCourses.id））

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

外部函数
filter
将返回一个新数组，其中只包含回调函数中返回“true”的项

内部回调函数
some
在另一个数组（学生注册的课程）中循环，如果找到与给定条件匹配的任何数组，则返回true

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

if（course.courseUrl==courseList.CourseCode）

通过检查
课程列表
数组中是否包含每个
课程
，将URL与
课程列表
元素的
课程代码
属性匹配，可以筛选
课程
数组
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>
    );
  })}

const{courses}=this.state；
const{courseList}=this.state；
...
{课程
.filter（{courseUrl}）=>
courseList.some（{CourseCode}=>CourseCode===courseUrl）
)
.map（（课程）=>{
返回(
{course.courseName}
{课程。课程摘要}

{" "}
课程{“}
);
})}
course.courseUrl的价值是什么。我认为您需要映射课程列表的价值，并检查课程代码是否检查了
courseList
value？@ZealousWeb course.courseUrl相当于courseList中的课程代码，我只是在这个数组中没有特定的CourseCode对象，因为它与url@kunquan我在.map中做了，但它没有定义，所以这就是我的问题所在。
if (course.courseUrl === "websitedesign")

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