React 动态添加、删除元素,删除元素时发生错乱

1,256 阅读1分钟

项目中有一个需求,点击添加按钮动态添加元素,点击元素对应的删除按钮,删除该元素。 添加元素时,为每一个元素设置了key值,为this.state.items.length;新增没有问题,删除时总是删除最后一个,导致错乱。 排查问题发现问题原因是:key={this.state.items.length},删除中间项时,实际删除的为最后一项;是因为key不唯一,解决方法就是为key值赋一个唯一值。

`constructor (props) { super(props); this.state = { items: [], count: 0 } }

<button className="button-style" onClick={ this.addEtim }>添加

addEtim = () => { let idNo = 'div' + this.state.count; const item =

<p onClick={() => this.deleteItem(idNo)}>交接项目{this.state.count}

交接内容
let count = this.state.count + 1; this.setState({ items: [...this.state.items, item], count: count }) }`