如何將更新的數組 object 從 reactJs 中的子組件傳遞給父組件

Question

我在我的組件中添加、編輯、更新和刪除運行良好的數組元素。

問題是我無法對父組件執行相同的過程，因為我需要將該數組數據傳遞給父組件。

一個數組在子組件中獲取項目（將該項目也發送到父組件數組）

更新（在父組件數組中更新實際一項但類似 object ）

刪除也一樣。

在子組件中執行所有這些操作時，我無法更新父數組。

我想在我的父組件中更新數組。 下面是代碼。

子組件：

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

我也需要在我的父組件中完成所有這些過程。

有沒有更好的方法來處理這種情況？

如何在父組件中獲取更新、編輯、刪除的項目和操作？

因此子和父在 arrays 中顯示相同的數組組件數據。

Answer 1

您應該在這里應用單一事實來源原則。 僅更新父項中的數據（使用傳遞給子項的回調，就像您當前所做的那樣），然后將結果作為道具傳遞給子項。 這樣，兩個組件中的數據將始終保持同步。

編輯：

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

現在您將這個 function 作為道具與數據一起傳遞給孩子：

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

不要使用孩子的state，只使用從父母傳來的lead_plans 。

順便說一句，您應該使用camelCase作為變量名。

Answer 2

要將數據從子級傳遞給父級，您可以編寫如下代碼，您將在父級中獲取數據。

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