索引無法在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>
        )
    }
})