Reactjs 如何从数组中删除项目（以及它旁边的'；删除'；按钮）？反应

我列了一张单子。我希望有一个按钮可以从列表中删除不需要的行。这个按钮坏了。提前谢谢

function App() {

  const [val,setval]=useState('enter please');
  const [enter,setenter]=useState([]);

function handle(){ 
   if (val!==''){setenter([...enter,val])
setval('')}
}
function delet(e){ /// here is the problem!!
//var indexi= e.target.id;
if(e>-1){ enter.splice(e,1)}
setenter(enter);
}
function handval(e){
  setval(e.target.value)
}
  return (
    <div >
 
  <input type="text"  onChange={handval}  value={val}  ></input>
  <button onClick={handle}> click </button>
  {enter.map(index => (<li>{index} ,
  <button id={index} on onClick={delet(index)}>delete</button></li>  ))}
 
    </div>
  );
}

export default App;

函数应用程序（）{
const[val，setval]=useState（'请输入'）；
const[enter，setenter]=useState（[]）；
函数句柄（）{
如果（val！=''）{setenter（[…enter，val]）
setval（“”）}
}
函数delet（e）{///问题出在这里！！
//var indexi=e.target.id；
如果（e>-1）{输入.splice（e，1）}
设置回车（回车）；
}
函数handval（e）{
setval（即目标值）
}
返回(
点击
{enter.map（index=>（
{index}），
删除
）}
);
}
导出默认应用程序；

在onClick处理程序中，您实际上是在调用

delet（index）

，而不是在触发事件时将其传递给调用方。要解决这个问题，只需将onClick处理程序更改为

---

onClick={（）=>delet（index）}

首先，在使用

map

enter.map（index=>（
）。。。

然后，在

输入

数组中，输入中键入了值，而不是索引。 因此，您的

enter.splice（e，1）

是无意义的，因为

e

不是一个数字，而是一个字符串

如果需要“映射”索引，则应使用

enter.map（（值、索引）=>（..）

您的按钮要删除哪一行？我们需要更多详细信息。在添加到数组中的每一行（通过“输入”）旁边都有一个“删除”按钮来删除这一行。我已修复为（）=>但是按钮“删除”不会删除添加到数组中的每一行（通过“输入”）旁边的行有一个“删除”按钮来删除这一行。我已经修复了（）=>按钮“删除”仍然没有删除itO.K旁边的行…但是问题是什么呢？函数delet（e）{if（Number（e）>-1）{enter.splice（Number（e），1）}setenter（enter）；}--------------------{enter.map（（enter，index）=>（

{enter}，delet（index）}}>删除

）}