react中涉及的增加,删除list方式
作者:赵乘风_i
这篇文章主要介绍了react中涉及的增加,删除list方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
react涉及的增加,删除list
做的项目中有一个功能是需要对多个Input组成的list可以新增和删除。
刚开始想的解决是直接使用index来做,这个可以新增,但是做不了删除,会出现list错乱的问题,即使是删除中间的某一个,但总也是删除的最后一个。原因是index-1只会删除最后一个,再重新渲染后会刷新列表。
如果只是新增但是不填写内容,那么删除了也无所谓,但如果新增后填写再删除就出问题了。
解决办法是使用唯一标识符,也就是id,就是前端自己生成id,根据id删除就不会错乱了。
在这个项目中,因为新建和编辑是同一个页面,而且在进入这个页面之后会根据是否有xxId来区分是新建还是编辑,因为会请求两个不同的接口来获取数据。所以在从接口请求回来的返回值那边做了处理,添加了唯一标识符,也就是selfId。我是对dispatch后获取的result进行操作。
如下:
const dealListData = (result) => { // console.log('listR', result); if (result.length===0) { result.push({ selfId:1 }); } else { result.map((item, index) => { item.selfId = String(index + 1); return item; }); } // console.log(result); return result; };
新增的函数
list是指几个Input组成的块,是要对其新增和删除
handleAdd = () => { let selfId = Number(this.state.list[this.state.list.length-1].selfId) + 1; // console.log(this.state.list[this.state.list.length-1].selfId +1); this.props.form.validateFields((err, value) => { if (!err) { this.state.list.push({ selfId:selfId }); this.props.onChange(this.state.list); } }); }
删除的函数
handleDeleteItem = (i, selfId) => { this.setState({ list: this.state.list.filter(item => item.selfId !== selfId) }, () => { // console.log('delete', this.state.list); this.props.onChange(this.state.list); }); }
根据selfId进行删除
因为list是我又重新封装的子组件,而值要实时反映到父组件上去,需要都需要通过this.props.onChange事件去实时更新。这样删除和新增就没有问题了。
总结
不能根据下标index进行新增删除,会错乱。需要有唯一标识符用来更新。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。