react 涉及的增加，刪除list

做的專案中有乙個功能是需要對多個input組成的list可以新增和刪除。

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

如果只是新增但是不填寫內容，那麼刪除了也無所謂，但如果新增後填寫再刪除就出問題了。

解決辦法是使用唯一識別符號，也就是id，就是前端自己生成id，根據id刪除就不會錯亂了。

在這個專案中，因為新建和編輯是同乙個頁面，而且在進入這個頁面之後會根據是否有xxid來區分是新建還是編輯，因為會請求兩個不同的介面來獲取資料。所以在從介面請求回來的返回值那邊做了處理，新增了唯一識別符號，也就是selfid。我是對dispatch後獲取的result進行操作。如下


const deallistdata = 
(result) => );
} else );
}// console.log(result);
return result;
};

新增的函式 list是指幾個input組成的塊，是要對其新增和刪除


handleadd = 
() => );
this.props.onchange(
this.state.list);
}});
}

刪除的函式


handledeleteitem = 
(i, selfid) => , () => );
}

根據selfid進行刪除

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

總結：不能根據下標index進行新增刪除，會錯亂。需要有唯一識別符號用來更新。

做的專案中有乙個功能是需要對多個input組成的list可以新增和刪除。