时间戳

首页 > 解决方案 > 为什么 React 列表切片总是删除最后一行

asp.net-mvc - 为什么 React 列表切片总是删除最后一行

问题描述

我在 Angular 中有类似的代码，效果很好。我试图将代码转换为 React 版本。它工作得很好，除非我尝试删除一行。每次删除单击都会删除最后一行。我的期望是删除我单击“删除”按钮的行。我正在传递需要删除的索引项。我提供了下面的示例，您也可以在这里尝试... https://jsfiddle.net/w6cy0bx1/11/

class MineCts extends React.Component{
constructor(props){
super(props);
this.state = {
items:[]
};
}

render(){
return(
<div>
  <div><button onClick={(event)=>this.add(event)} >Add</button></div>
  <div>
    This is sample:
    {this.state.items.map((record, index)=>{
    return(
    <table>
      <tr key={index}>
        <td> <input id="Name" value={record.Name} onChange={this.onDataChange}/> </td>
        <td> <input id="Counter" value={record.Counter} onChange={this.onDataChange} /> </td>
        <td><button onClick={(event)=>this.remove(event, record, index)} >Remove</button></td>
      </tr>
    </table>
    )
    })}

  </div>
</div>
)
}

onDataChange(e)
{
console.log(e.target.id)
this.setState({[e.target.id]:e.target.value})
}

add(e){
let rows = this.state.items;
rows.push({});
this.setState({items:rows})
}

remove(e, record, index){
console.log(record)
console.log(index)
let rows = this.state.items;
rows.splice(index, 1);
this.setState({items:rows})
}

}



ReactDOM.render(<MineCts />, mountNode)

标签： asp.net-mvcreactjs

解决方案

经过仔细检查，问题是由于：

      <tr key={record.index}>

这实际上并没有被设置，你的孩子没有唯一的密钥，所以 React 不知道这些孩子中的哪一个被修改了，所以当你删除其中一个时，它有点困惑。

您需要为每条记录提供唯一的密钥。

我更新了您的代码并用作new Date().getTime()获取唯一密钥的快速方法。

我在https://jsfiddle.net/xk4e1z2s/2/有一个工作示例

您将看到每个记录的唯一键的值在添加时显示，并且您会注意到只有特定行被删除。

删除一行后输入字段为空的原因是您需要保存记录的输入值。

推荐阅读