从多个 child 组件的 componentDidMount() 同步更新 Parent 组件状态

Question

好的，所以这个问题有点棘手。我一直在思考这是否是正确的概念，考虑到 React 应该是一个 one-way 数据流，从 parent 到 children，反之亦然。但无论如何我都想post这个问题，所以我会得到不同的意见，甚至可能是一种让它发挥作用的方法。

在我的应用程序中，我有一个相当大的组件，它接受表单作为它的 children，并且做了一些漂亮的 React 魔法将它的方法传递给 children 所以当 children 元素被更改，它们触发 parent 组件方法，这些方法将数据存储在状态中并处理表单提交。它工作得很好，但是它不太擅长捕捉 "defaultValues"。

简而言之，我试图在孩子的 componentidMount() 方法上触发我的 parent 方法，并且它有效，但是，如果有多个 child 尝试执行此操作，该方法被调用两次，但它只使用第二个 child 的数据集。

我在以下代码中创建了我的问题的简化版本：

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

此代码将在控制台上呈现 'updating data' 两次，但它只会使用 child2 中发送的数据更新状态。同样，考虑到我从其 children 设置 parent 的状态，我可以看出这可能不是最佳方法，但它是在 [= 上设置默认值的一个很好的解决方案30=] 组件被不同的 children 重复使用。

我都耳朵堆栈溢出

Answer 1

我认为问题在于 setState 同时进行两个更新（对它们进行批处理），这意味着在合并两个部分状态时使用相同的初始状态。您需要使用 kind user:

所示的更新程序功能

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

从多个 child 组件的 componentDidMount() 同步更新 Parent 组件状态

Updating Parent Component state from multiple child components' componentDidMount() synchronously

javascript

lifecycle

children

direction

reactjs