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

Question

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

https://codesandbox.io/s/musing-rgb-ikq33?from-embed

我有一个场景，我需要从子组件更新父组件中的数组。

例如，我从表单添加数组内容，所以如果我在子组件中有 7 个项目（我从子组件添加并从表单一个接一个地将它们传递给父组件）。

如何在不改变原始数组的情况下编辑/更新单个数组行？

添加工作正常，我需要编辑单个项目并在父组件中更新它（包含来自子组件的所有数组元素），但似乎没有突变就无法完成。

父组件：

handlePlansClick = (planData) => {
        this.setState(state => ({
            lead_plans: [...state.lead_plans, planData]
        }));
    }

父组件中的子组件声明：

 <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，从一个组件传递数据组件到任何其他组件并更新根状态对象。 Redux 在实现时也有很多样板，所以如果应用程序很简单，您可以使用 MobX。