如何在 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 是数组中值的索引）