Javascript 如何在reactJs中将更新的数组对象从子组件传递到父组件

我正在添加、编辑、更新和删除我的组件中工作正常的数组元素

问题是我不能对父组件执行相同的过程，因为我需要将该数组数据传递给父组件

数组在子组件中获取项（也将该项发送到父组件数组）

更新（更新父组件数组中实际的一个项目，但也更新类似的对象）

删除也是如此

在子组件中执行所有这些操作时，我无法更新父阵列

我想在父组件中更新数组。 下面是代码

子组件：

// child component saving element in an array
    saveLeadPlanDialog = () => {

        const {updateMode, lead_id, year, probability, plan2, plan3, fee, addcosts} = this.state;

        // here i am setting that data in child component
        this.setState(state => ({
            lead_plans: [...state.lead_plans, {
                id: Date.now(),
                year: year,
                probability: probability,
                plan2: plan2,
                plan3: plan3,
                fee: fee,
                addcosts: addcosts
            }]
        }));

        // here i am sending that data to parent component.
        this.props.plansClick({
                id: Date.now(),
                year: year,
                probability: probability,
                plan2: plan2,
                plan3: plan3,
                fee: fee,
                addcosts: addcosts
            }
        );
    }

// here i am doing delete process in child component
handleRemoveFields = () => {
        const {updateMode, lead_plan_row} = this.state;
        this.setState(prevState => ({lead_plans: prevState.lead_plans.filter(lead_offer_rec => lead_offer_rec !== lead_plan_row)}));
    };

// updating in child component
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
            });

 // parent component method.
    handlePlansClick = (planData) => {
        // this is parent componet, here i need to do update, delete the array object which got updation and deletion in child component
        // it alwaya adds item right now.
        this.setState(state => ({
            lead_plans: [...state.lead_plans, planData]
        }));
    }

父组件：

// child component saving element in an array
    saveLeadPlanDialog = () => {

        const {updateMode, lead_id, year, probability, plan2, plan3, fee, addcosts} = this.state;

        // here i am setting that data in child component
        this.setState(state => ({
            lead_plans: [...state.lead_plans, {
                id: Date.now(),
                year: year,
                probability: probability,
                plan2: plan2,
                plan3: plan3,
                fee: fee,
                addcosts: addcosts
            }]
        }));

        // here i am sending that data to parent component.
        this.props.plansClick({
                id: Date.now(),
                year: year,
                probability: probability,
                plan2: plan2,
                plan3: plan3,
                fee: fee,
                addcosts: addcosts
            }
        );
    }

// here i am doing delete process in child component
handleRemoveFields = () => {
        const {updateMode, lead_plan_row} = this.state;
        this.setState(prevState => ({lead_plans: prevState.lead_plans.filter(lead_offer_rec => lead_offer_rec !== lead_plan_row)}));
    };

// updating in child component
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
            });

 // parent component method.
    handlePlansClick = (planData) => {
        // this is parent componet, here i need to do update, delete the array object which got updation and deletion in child component
        // it alwaya adds item right now.
        this.setState(state => ({
            lead_plans: [...state.lead_plans, planData]
        }));
    }

我也需要在父组件中执行所有这些过程

有没有更好的方法来处理这种情况

如何在父组件中更新、编辑、删除项目和操作

---

因此，子级和父级都在数组中显示相同的数组组件数据。

您应该在此处应用单一真实源原则。仅更新父级中的数据（使用传递给子级的回调，就像您当前所做的那样），然后将结果作为道具传递给子级。这样，两个组件中的数据将始终同步

编辑：

现在，将此函数作为道具与数据一起传递给子对象：

<Child handlePlansClick={this.handlePlansClick} lead_plans={this.state.lead_plans}/>

不要使用子级的状态，只使用从父级传递的

lead\u plans

---

顺便说一句，您应该使用

camelCase

作为变量名。

您应该在这里应用单一真理来源原则。仅更新父级中的数据（使用传递给子级的回调，就像您当前所做的那样），然后将结果作为道具传递给子级。这样，两个组件中的数据将始终同步

编辑：

现在，将此函数作为道具与数据一起传递给子对象：

<Child handlePlansClick={this.handlePlansClick} lead_plans={this.state.lead_plans}/>

不要使用子级的状态，只使用从父级传递的

lead\u plans

---

顺便说一句，您应该使用

camelCase

作为变量名。

要将数据从子级传递到父级，您可以编写如下代码，并在父级中获取数据

 Class Child {
        const passDataToParent =() =>{
           const sampleObj = {"name": "Xyz","contact":98739793};
           this.props.receiveChildData(sampleObj );
        }; 
 } 



Class Parent{
    const storeChildData = (dataReceivedFromChild) =>{
         console.log("Received child data",storeChildData)
    }

    render(){
       return (<Child receiveChildData={this.storeChildData}>);
    }
 }

类子类{
const passDataToParent=（）=>{
const sampleObj={“name”：“Xyz”，“contact”：98739793}；
this.props.receiveChildData（sampleObj）；
}; 
} 
班级家长{
常量storeChildData=（dataReceivedFromChild）=>{
日志（“收到的子数据”，storeChildData）
}
render（）{
返回（）；
}
}

要将数据从子级传递到父级，您可以编写如下代码，然后在父级中获取数据

 Class Child {
        const passDataToParent =() =>{
           const sampleObj = {"name": "Xyz","contact":98739793};
           this.props.receiveChildData(sampleObj );
        }; 
 } 



Class Parent{
    const storeChildData = (dataReceivedFromChild) =>{
         console.log("Received child data",storeChildData)
    }

    render(){
       return (<Child receiveChildData={this.storeChildData}>);
    }
 }

类子类{
const passDataToParent=（）=>{
const sampleObj={“name”：“Xyz”，“contact”：98739793}；
this.props.receiveChildData（sampleObj）；
}; 
} 
班级家长{
常量storeChildData=（dataReceivedFromChild）=>{
日志（“收到的子数据”，storeChildData）
}
render（）{
返回（）；
}
}

通过从子组件执行操作，如何仅更新父组件中的数据？你能给出代码示例吗？更新了答案。请容忍我的知识不足，但我将在哪个地方进行编辑、更新、删除工作？还有，我如何将更新后的数据传回给家长？你能解释一下吗？从技术上讲，你不会把数据传给父母。将父对象的方法（

handlePlansClick

）向下传递给子对象，然后在子组件（

this.props.handlePlansClick（newData）

）中调用它，并将新数据作为参数传递。数据突变只会发生在父组件中，子组件只会得到结果作为道具。通过我从子组件中执行操作，如何更新仅在父组件中的数据？你能给出代码示例吗？更新了答案。请容忍我的知识不足，但我将在哪个地方进行编辑、更新、删除工作？还有，我如何将更新后的数据传回给家长？你能解释一下吗？从技术上讲，你不会把数据传给父母。将父对象的方法（

handlePlansClick

）向下传递给子对象，然后在子组件（

this.props.handlePlansClick（newData）

）中调用它，并将新数据作为参数传递。数据突变只会发生在父数组中，子数组只会得到结果作为道具。我已经用了更多不同的方法来做了，问题是我需要同时同步两个数组！！！我的孩子的工作很好，但我需要在我的父组件更新以同样的方式也一切！！！正如我所说，你不需要同步任何东西。将整个状态保留在父组件中，并将其相关部分作为道具传递给子组件。@LearningROR如果您不想在两个位置执行相同的过程，则可以使用以下两种方法。1） 将更新的数据从子级传递到父级。2） 使用redux，在任何操作中，您都需要更新redux存储上的数据，在redux存储更新时，您将在父组件中获得更新的数据。如何使用#2？我使用redux只是为了获取api调用之类的东西。在这方面，如何从it中获得工作？同样是因为我正在将值从孩子传递给家长，但我并没有在家长中获得更新的内容。在这两个地方，我都在使用。。。操作符。我已经用更多不同的方法来做了，问题是我需要同时同步两个数组！！！我的孩子的工作很好，但我需要在我的父组件更新以同样的方式也一切！！！正如我所说，你不需要同步任何东西。将整个状态保留在父组件中，并将其相关部分作为道具传递给子组件。@LearningROR如果您不想在两个位置执行相同的过程，则可以使用以下两种方法。1） 将更新的数据从子级传递到父级。2） 使用redux，在任何操作中，都需要更新red上的数据