索引无法在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]等。

如果要过滤，请尝试在地图旁边使用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 }), {}))

Answer 2

因此，地图不会过滤。 它遍历每个项目并每次都返回一些东西。 您可能正在寻找过滤器。 我使用了普通的for循环，因为在这种情况下它可能更容易理解

function filterVideos(){
    const ids = [];
    const videoDivs = [];
    for(const video of this.props.videos){
        if(ids.includes(video.id)){
            continue
        }
        ids.push(video.id);
        videoDivs.push(
            <option
                key={video.id}
                value={video.project.id}
            >
                {video.project.projectName}
            </option>
        )
    }
    return videoDivs
}

Answer 3

好的，这可行。 谢谢Patrick Evans，这对我来说应该很明显！ 我必须在if语句中添加“ i> 0”。

this.props.videos.map((video, i, videos) => {
    if (i > 0 && video.project.id !== videos[i - 1].project.id) {

        return (
            <option
                key={video.id}
                value={video.project.id}
            >{video.project.projectName}
            </option>
        )
    }
})