[英]How to update and delete array of elements from child component and pass that to parent component in ReactJs
EDIT: I have created a codesandbox.编辑:我创建了一个代码框。 Here is the link:链接在这里:
https://codesandbox.io/s/musing-rgb-ikq33?from-embed https://codesandbox.io/s/musing-rgb-ikq33?from-embed
I have a scenario in which I need to update the array in parent component from child component.我有一个场景,我需要从子组件更新父组件中的数组。
Eg, I am adding array contents from form, so if I have 7 items in child component ( that I am adding from child and passing them in parent component one by one from form ).例如,我正在从表单添加数组内容,所以如果我在子组件中有 7 个项目(我从子组件添加并从表单将它们一一传递给父组件)。
How I can edit/update single array row without mutating my original array?如何在不改变原始数组的情况下编辑/更新单个数组行?
The adding is working fine, I need to work on edit single item and update that in parent component ( that has all array elements from child ) but it seems like without mutation it cant be done.添加工作正常,我需要编辑单个项目并在父组件中更新它(包含来自子组件的所有数组元素),但似乎没有突变就无法完成。
Parent component:父组件:
handlePlansClick = (planData) => {
this.setState(state => ({
lead_plans: [...state.lead_plans, planData]
}));
}
Child component declaration in Parent component: Parent组件中的子组件声明:
<LeadPlans handlePlansClick={this.handlePlansClick} existing_lead_plans={this.state.lead_plans}
must_contain_lead_plan={this.state.must_contain_lead_plan} lead_id={lead_id} updateMode={updateMode}/>
For adding to parent from child form I am using:为了从子表单添加到父表单,我正在使用:
this.props.handlePlansClick({
id: Date.now(),
year: year,
probability: probability,
plan2: plan2,
plan3: plan3,
fee: fee,
addcosts: addcosts
}
);
For updating:对于更新:
const {lead_id, lead_plans, year, probability, plan2, plan3, fee} = this.state;
const new_lead = {
id: lead_id,
year,
probability,
plan2,
plan3,
fee,
};
const updated_lead_plans = lead_plans.map((lead) => lead.id === lead_id ? new_lead : lead);
this.setState({
lead_plans: updated_lead_plans,
year: '',
probability: '',
plan2: '',
plan3: '',
fee: '',
addcosts: '',
newFieldsEditMode: false,
LeadPlanSaveUpdateDialogOpen: false
});
Now, its working as expected but problem is that its not updating my parent array in which I need to have updated array item.现在,它按预期工作,但问题是它没有更新我需要更新数组项的父数组。 It updating all contents in child component only which I dont want to.它仅更新我不想更新的子组件中的所有内容。
This below code needs fix as I want to remove existing item and update that updated one in parent array again that contains all array of elements:下面的代码需要修复,因为我想删除现有项目并再次更新父数组中包含所有元素数组的更新项目:
const updated_lead_plans = lead_plans.map((lead) => lead.id === lead_id ? new_lead : lead);
this.setState({
lead_plans: updated_lead_plans,
year: '',
probability: '',
plan2: '',
plan3: '',
fee: '',
addcosts: '',
newFieldsEditMode: false,
LeadPlanSaveUpdateDialogOpen: false
});
Similarly, for deletion I am using:同样,对于删除我正在使用:
this.setState(prevState => ({lead_plans: prevState.lead_plans.filter(lead_offer_rec => lead_offer_rec !== lead_plan_row)}));
But it only working in child component as I want to remove item and update my parent array with that removed item as well.但它只在子组件中工作,因为我想删除项目并使用删除的项目更新我的父数组。
How I can get that edit/update/delete from child and pass the updated array to parent again?如何从子级获取编辑/更新/删除并将更新后的数组再次传递给父级?
In React the data flow should always be from the parent component to the child component and not vice versa.You can use a 'Global State management tool' like Redux
to pass data from one component to any other component(s) and update the root state object.在 React 中,数据流应始终从父组件流向子组件,反之亦然。您可以使用像Redux
这样的“全局 State 管理工具”将数据从一个组件传递到任何其他组件并更新根state object。 Also Redux
has a lot of boilerplate while implementing it so if the app is simple you can use MobX
.此外Redux
在实现时有很多样板,所以如果应用程序很简单,您可以使用MobX
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.