react中涉及的增加,刪除list方式

更新時間：2024年01月03日 09:47:39 作者：趙乘風(fēng)_i

這篇文章主要介紹了react中涉及的增加,刪除list方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

react涉及的增加,刪除list

做的項目中有一個功能是需要對多個Input組成的list可以新增和刪除。

剛開始想的解決是直接使用index來做，這個可以新增，但是做不了刪除，會出現(xiàn)list錯亂的問題，即使是刪除中間的某一個，但總也是刪除的最后一個。原因是index-1只會刪除最后一個，再重新渲染后會刷新列表。

如果只是新增但是不填寫內(nèi)容，那么刪除了也無所謂，但如果新增后填寫再刪除就出問題了。

解決辦法是使用唯一標(biāo)識符，也就是id，就是前端自己生成id，根據(jù)id刪除就不會錯亂了。

在這個項目中，因為新建和編輯是同一個頁面，而且在進(jìn)入這個頁面之后會根據(jù)是否有xxId來區(qū)分是新建還是編輯，因為會請求兩個不同的接口來獲取數(shù)據(jù)。所以在從接口請求回來的返回值那邊做了處理，添加了唯一標(biāo)識符，也就是selfId。我是對dispatch后獲取的result進(jìn)行操作。

如下：

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;
};

新增的函數(shù)

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);
      }
   });
}

刪除的函數(shù)

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);
    });
}

根據(jù)selfId進(jìn)行刪除

因為list是我又重新封裝的子組件,而值要實時反映到父組件上去，需要都需要通過this.props.onChange事件去實時更新。這樣刪除和新增就沒有問題了。