javascript - 如何从子组件中更新和删除元素数组并将其传递给 ReactJs 中的父组件
问题描述
编辑:我创建了一个代码框。链接在这里:
https://codesandbox.io/s/musing-rgb-ikq33?from-embed
我有一个场景,我需要从子组件更新父组件中的数组。
例如,我正在从表单添加数组内容,所以如果我在子组件中有 7 个项目(我从子组件添加并从表单将它们一一传递给父组件)。
如何在不改变原始数组的情况下编辑/更新单个数组行?
添加工作正常,我需要编辑单个项目并在父组件中更新它(包含来自子组件的所有数组元素),但似乎没有突变就无法完成。
父组件:
handlePlansClick = (planData) => {
this.setState(state => ({
lead_plans: [...state.lead_plans, planData]
}));
}
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}/>
为了从子表单添加到父表单,我正在使用:
this.props.handlePlansClick({
id: Date.now(),
year: year,
probability: probability,
plan2: plan2,
plan3: plan3,
fee: fee,
addcosts: addcosts
}
);
对于更新:
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
});
现在,它按预期工作,但问题是它没有更新我需要更新数组项的父数组。它仅更新我不想更新的子组件中的所有内容。
下面的代码需要修复,因为我想删除现有项目并再次更新父数组中包含所有元素数组的更新项目:
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
});
同样,对于删除我正在使用:
this.setState(prevState => ({lead_plans: prevState.lead_plans.filter(lead_offer_rec => lead_offer_rec !== lead_plan_row)}));
但它只在子组件中工作,因为我想删除项目并使用删除的项目更新我的父数组。
如何从子级获取编辑/更新/删除并将更新后的数组再次传递给父级?
解决方案
在 React 中,数据流应始终从父组件流向子组件,反之亦然。您可以使用“全局状态管理工具”,例如Redux
将数据从一个组件传递到任何其他组件并更新根状态目的。在实现它时也Redux
有很多样板,所以如果应用程序很简单,你可以使用MobX
.
推荐阅读
- react-native - 反应本机内存泄漏反应导航
- css - 有什么方法可以动态地将css应用于我的子组件?
- asp.net-core - 如何处理 DevExtreme DataGrid 模板中的空数据条件?
- html - 使用 XHR 从服务器下载 PDF 文件
- python-3.x - 比较图像以发现图像明显相同
- python - 连接两个具有不同索引长度的 Pandas DataFrame 列
- database - neo4j 查询列表中至少包含一项的数组字段
- git - Git - 在跳过子模块的分支之间同步特定文件
- javascript - React Native 日历选择器给出 null
- python - dns.resolver.Resolver() 如何找到域名服务器?