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进行新增删除，会错乱。需要有唯一标识符用来更新。

react 涉及的增加，删除list

猜你喜欢