[英]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.