Синхронное обновление состояния родительского компонента из componentDidMount () нескольких дочерних компонентов

Question

Хорошо, поэтому этот вопрос немного сложен.Я думал о том, является ли это даже правильной концепцией, учитывая, что React должен быть односторонним потоком данных, от родителей к детям, а не наоборот.Но я все равно хотел бы опубликовать вопрос, чтобы получить разные мнения и даже, возможно, способ заставить это работать.

В моем приложении есть довольно большой компонент, который принимает формы в качестве дочерних и выполняеткакая-то изящная магия React для передачи своих методов дочерним элементам, поэтому при изменении дочерних элементов они запускают методы родительских компонентов, которые хранят данные в состоянии и обрабатывают отправку формы.Он работает очень хорошо, однако не так хорошо ловит "defaultValues".

В двух словах, я пытаюсь вызвать свой родительский метод для метода componententidMount () chilren, и он работает, однако, если это пытаются сделать более одного дочернего элемента, метод вызывается дважды, ноон использует только набор данных второго потомка.

Я создал упрощенную версию своей проблемы в следующем коде:

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 делает оба обновления одновременно (пакетирует их), что означает, что при объединении обоих частичных состояний используется одно и то же начальное состояние.Вам нужно использовать функцию обновления, как показано добрым пользователем :

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