如何更新和删除子组件中的元素数组并将其传递给 ReactJs 中的父组件

Question

编辑：我创建了一个代码框。 链接在这里：

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

但它只在子组件中工作，因为我想删除项目并使用删除的项目更新我的父数组。

如何从子级获取编辑/更新/删除并将更新后的数组再次传递给父级？

Answer 1

在 React 中，数据流应始终从父组件流向子组件，反之亦然。您可以使用像Redux这样的“全局 State 管理工具”将数据从一个组件传递到任何其他组件并更新根state object。 此外Redux在实现时有很多样板，所以如果应用程序很简单，您可以使用MobX 。