首先，带有点击事件的 span 元素需要有一个 name 属性，否则，e.target 中将找不到名称.话虽如此，e.target.name 是为表单元素(输入、选择等)保留的.因此，要实际使用 name 属性，您必须使用 e.target.getAttribute("name")

另外，因为你有一个对象数组，所以使用 list.indexOf(e.target.name) 是无效的，因为它正在寻找一个 string> 当您迭代对象时.这就像在 [{}, {}, {}]

最后，array.slice() 返回一个新数组从您传递给它的索引处的项目开始.因此，如果您点击最后一项，您将只能返回最后一项.

使用 .filter() 尝试类似的操作:codesandbox

import React, { useState } from "react";从react-dom"导入 ReactDOM；导入./styles.css"；const App = () =>{const defaultList = [{名称:ItemOne"}，{名称:项目二"}，{名称:项目三"}];const [list, updateList] = useState(defaultList);const handleRemoveItem = (e) =>{const name = e.target.getAttribute("name")updateList(list.filter(item => item.name !== name));};返回 (<div>{list.map(item => {返回 (<><span name={item.name} onClick={handleRemoveItem}>X</span><span>{item.name}</span></>);})}