如何从数组javascript和reactjs添加,编辑,更新,删除元素

我有以下表格:

enter image description here

下面是添加数组元素的表:

enter image description here

我有一种形式,可以使用以下代码在数组中添加值:

const {updateMode, lead_id, year, probability, plan2, plan3, fee, addcosts} = this.state;
this.setState(state => ({
                lead_plans: [...state.lead_plans, {
                    year: year,
                    probability: probability,
                    plan2: plan2,
                    plan3: plan3,
                    fee: fee,
                    addcosts: addcosts
                }]
            }));

单击编辑按钮后,我使用以下代码:

let added_lead_plan = this.state.lead_plans.find(lead_plan_rec => lead_plan_rec.year === lead_plan.year);

            this.setState({
                plan_id: added_lead_plan.id,
                year: added_lead_plan.year,
                probability: added_lead_plan.probability,
                plan2: added_lead_plan.plan2,
                plan3: added_lead_plan.plan3,
                fee: added_lead_plan.fee,
                addcosts: added_lead_plan.addcosts,
                LeadPlanSaveUpdateDialogOpen: true,
            });

为了删除,我使用以下代码:

this.setState(prevState => ({lead_plans: prevState.lead_plans.filter(lead_plan_rec => lead_plan_rec !== lead_plan_row)}));

现在,

添加工作正常。 编辑使我可以根据日期查找以编辑形式显示正确的值。

问题:

我无法更新数组中的已编辑元素。相反,它应该在更新记录时再次在阵列中添加该记录。 但是,如果有人会编辑日期,那么我将只能根据日期来更新记录-因此,这就是另一个问题。

要求:

我需要一种方法,使人们可以轻松地从表单中添加尽可能多的值。逐一编辑它们,并仅更新数组中已更新的那些,并删除单击删除的相应的那些。

评论