Как поднять состояние, если это нужно делать при каждом обновлении state потомка?

Question

[sinneren]

Добрый день.
Принцип поднятия состояний знаю. react 16.5.1.
Есть приложение, которое состоит из Родителя и 2-х потомков. В одном потомке у меня происходят некоторые вычисления, то есть метод calculation выполняется при монтировании компонента и при каждом изменении в инпутах. Этот метод изменяет состояние этого компонента. Мне необходимо, чтобы это состояние при каждом изменении пробрасывалось выше к родителю, и передавалось ко 2-му потомку.
Логично это было бы сделать в componentDidUpdate, но тогда получу Maximum update depth exceeded, т.к. в методе для поднятия использую setState для родителя, чтобы передать далее. Как поступить тут не понимаю

Comments

[Роман Александрович]

пока у вас 2 потомка то можно сделать состояние у родителя и с 1 потомка ложить данные в стейт родителя и прокидывать стейт во второго потомка. Пока у вас 2 потомка это имеет смысл но если вдруг у вас появится 3 потомок и вам понадобятся данные думаю в этот момент стоит задуматься о редуксе.

Answer 1

[Антон Спирин]

Храните все состояние формы в родителе и передавайте ребенку колбек:

class Child extends Component {
  render() {
    const { handleChange } = this.props;

    return (
      <Wrapper>
        <SomeInput onChange={handleChange} /> 
      </Wrapper>
    );
  }
}

примерный код колбека:

handleChange = e => {
  const { name, value } = this.props;

  this.setState({ [name]: value }, this.calculate);
};

Comments

[sinneren]

Не знал, что в setState еще колбэк можно передать, спасибо, это решит проблему

Answer 2

[Ro37A]

Храните значение инпутов в родительском стейте и прокидывайте в пропсы детей.

class Parent extends React.Component {
    state = {
        inputFoo: '',
        inputBaz: ''
    };

    handleChangeInput = (inputName, value) => {
        this.setState({
            [inputName]: value
        })
    }

    render() {
        const { inputFoo, inputBaz } = this.state;

        return (
            <div>
                <Children1
                    inputFoo={inputFoo}
                    inputBaz={inputBaz}
                    onChangeInput={this.handleChangeInput}
                />
                <Children2
                    inputFoo={inputFoo}
                    inputBaz={inputBaz}
                />
            </div>
        );
    }
}

class Chidlren1 extends React.Component {
    handleInputChange = event => {
        const {name, value} = event.target
    
        this.props.onChangeInput(name, value);
      }

    render() {
        const { inputFoo, inputBaz } = this.props;

        return (
            <div>
                <input
                    type="text"
                    name="inputFoo"
                    value={inputFoo}
                    onChange={this.handleChangeInput}
                />
                <input
                    type="text"
                    name="inputBaz"
                    value={inputBaz}
                    onChange={this.handleChangeInput}
                />
            </div>
        );
    }
}

Answer 3

[real2210]

У родителя нужно сделать общее состояние для двух потомков.

И с родителя прокидывать в нужный компонент.