如何在 React (Hooks) 中從數組 state 中刪除元素

Question

我有一個文本輸入列表，其中的數據來自一個包含 URL 的數組（狀態），並給出了一個我想刪除相應元素的索引。 我有這段代碼，其中console.log正確顯示了沒有我刪除的元素的新數組，但由於某種原因，頁面上的最后一個輸入總是將從列表中刪除（直觀地說 - 下圖）。

const [videosList, setVideosList] = useState(videos.split(","))

const deleteVideo = (e) => {

    e.preventDefault()

    const index = parseInt(e.currentTarget.dataset.urlIndex)

    const removeFromVideosList = [...videosList]

    const newFromVideosList = {
        data: removeFromVideosList.filter((_, i) => i !== index)
    }

    console.log(newFromVideosList.data);

    setVideosList([...newFromVideosList.data])
}

...

{
    videosList.map((value, key) => {

        return (
            <Row key={key}>
                <Col xs={10}>
                    {inputUrl(value)}
                </Col>
                <Col xs={2}>
                    <a 
                        href="#" 
                        className="delete-video"
                        onClick={deleteVideo}
                        data-url-index={key}
                    >
                        <FaTrash />
                    </a>
                </Col>
            </Row>
        )
    })
}

無論我點擊哪里，最后一個輸入總是會從列表中刪除（但console.log(newFromVideosList.data);正確顯示新數組）。

有誰知道我在這里做錯了什么？ 謝謝！

EDIT1 - 我已經根據這里的人的建議改變了刪除元素的方式，但仍然是相同的行為（console.log 很好，但最后一個元素正在被 React 刪除）：

const deleteVideo = (e) => {

    e.preventDefault()

    const removeFromVideosList = [...videosList]

    var index = removeFromVideosList.indexOf(e.currentTarget.dataset.url)

    if (index !== -1) {

        removeFromVideosList.splice(index, 1)

        console.log(removeFromVideosList);

        setVideosList([...removeFromVideosList])
    }
}

編輯2：

{
    videosList.map((value, key) => {

        return (
            <Row key={`video_${key}`}>
                <Col xs={10}>
                    {inputUrl(value)}
                </Col>
                <Col xs={2}>
                    <a 
                        href="#" 
                        className="delete-video"
                        onClick={deleteVideo}
                        data-url={value}
                    >
                        <FaTrash />
                    </a>
                </Col>
            </Row>
        )
    })
}

Answer 1

{ 視頻列表.map((值, 鍵) => {

    return (
        /*use key as something unique to each row except the array's index */
        <Row key={value.id}>
            <Col xs={10}>
                {inputUrl(value)}
            </Col>
            <Col xs={2}>
                <a 
                    href="#" 
                    className="delete-video"
                    onClick={deleteVideo}
                    data-url-index={key}
                >
                    <FaTrash />
                </a>
            </Col>
        </Row>
    )
})

}

Answer 2

你渲染的Row是從數組索引中刪除的，但是它們應該從每個值完全唯一的東西中刪除，以便 React 正確地知道要更新哪些元素。 就像是：

<Row key={value}>

而不是

<Row key={key}> （其中 key 是數組中值的索引）