javascript - 索引在 React array.Map 函数中没有按预期工作

Question

我正在尝试从 React 中的 array.map 函数中删除重复项，但我不确定为什么会收到“无法读取未定义的属性”错误。

下面的代码不会返回任何结果，这正是我所期望的，因为 video.project.id 等于videos[i].project.id:

this.props.videos.map((video, i, videos) => {
    if (video.project.id !== videos[i].project.id) {
        return (
            <option
                key={video.id}
                value={video.project.id}
            >
              {video.project.projectName}
            </option>
        )
    }
})

所以我认为下面的代码应该返回每个条目之一，但我却收到错误:

this.props.videos.map((video, i, videos) => {
    if (video.project.id !== videos[i - 1].project.id) {
        return (
            <option
                key={video.id}
                value={video.project.id}
            >
              {video.project.projectName}
            </option>
        )
    }
})

谁能告诉我我在这里缺少什么？或者有更好的方法来过滤这个吗？

Answer 1

.map() 始终返回相同长度的数组。默认情况下，函数将返回“未定义”。所以你的数组可能看起来像 [optionComponent, undefined, undefined, optionComponent] 等。

如果您要进行过滤，请尝试在 map 旁边使用 Array.filter():

this.props.videos
.filter(video => video.project.id !== this.props.videos[i - 1].project.id)
.map((video, i, videos) => {
        return (
            <option
                key={video.id}
                value={video.project.id}
            >
              {video.project.projectName}
            </option>
        )
})

此外，“无法读取未定义的属性”可能是因为索引 -1 (0 - 1) 未定义

编辑:我不确定过滤器函数中的回调是否可以解决问题。您可以使用reduce 来使用对象来跟踪唯一值，然后将其转回数组:

uniqueVideos = Object.values(this.props.videos.reduce((prev, curr) => ({ ...prev, [curr.project.id]: curr }), {}))