從多個子組件的componentDidMount（）同步更新父組件狀態

Question

好的，所以這個問題有點棘手。 我一直在考慮這是否是正確的概念，考慮到React應該是單向數據流，從父級到子級，而不是相反。 但是無論如何，我都想發布問題，以便獲得不同的意見，甚至可能是使該問題生效的一種方法。

在我的應用程序中，我有一個相當大的組件，它接受表單作為其子級，並執行一些漂亮的React魔術將其方法傳遞給子級，因此當子級元素發生更改時，它們會觸發以狀態存儲數據的父級組件方法並處理表單提交。 它工作得很好，但是在捕獲“ defaultValues”方面並不是那么好。

簡而言之，我試圖在孩子的componentidMount（）方法上觸發我的父方法，並且它可以工作，但是，如果有多個嘗試這樣做的孩子，則該方法被調用兩次，但僅使用第二個孩子的數據集。

我在以下代碼中創建了我的問題的簡化版本：

import React from 'react'

export class Parent extends React.Component {
    constructor(props){
        super(props)
        this.state = {
            data : {name:'james'}
        }
        this.updateData = this.updateData.bind(this)
    }

    updateData(key,data){
        console.log('updating data')
        this.setState({
            data : {...this.state.data,[key]:data}
        })
    }

    render(){
        console.log(this.state)
        return (
            <div>
                <Child1 updateData={this.updateData}/>
                <Child2 updateData={this.updateData}/> 
            </div>
        )
    }
}

class Child1 extends React.Component {

    componentDidMount(){
        this.props.updateData('child1','myData')
    }

    render(){
        return (
            <div>
                I am Child 1
            </div>
        )
    }
}

class Child2 extends React.Component {

    componentDidMount(){
        this.props.updateData('child2','myData2')
    }

    render(){
        return (
            <div>
                I am Child 2
            </div>
        )
    }
}

該代碼將在控制台上兩次呈現“更新數據”，但只會使用child2中發送的數據來更新狀態。 再次，我可以看到這可能不是最好的方法，考慮到從子對象設置父對象的狀態，但是這對於在父組件上設置默認值是一個很好的解決方案，該組件在不同子對象之間可以重復使用。

我所有的耳朵都堆棧溢出

Answer 1

我認為問題在於setState執行兩個更新（批處理），這意味着合並兩個部分狀態時會使用相同的初始狀態。 您需要使用updater函數，如親切的用戶所示：

this.setState((prevState) => ({ data: { ...prevState.data, [key]: data } }));