Установить состояние родителя с помощью реакции Router из компонента Route

Question

У меня есть страница, на которой сверху находится индикатор шага (что-то вроде this ).В центре страницы есть контент, который зависит от текущего шага.Для управления шагом у меня есть фиксированный компонент с панелью шагов и переключатель с некоторыми маршрутами (/ step1 / step2).Когда я хочу перейти от шага 1 к шагу 2, я должен вызвать history.push() таким образом, я могу легко изменить маршрут.

Моя проблема заключается в том, что я не могу обновить панель шага с шага 2, потому что даже если я передам функциюна родительский ответ возвращает мне ошибку:

Превышена максимальная глубина обновления.Это может произойти, когда компонент повторно вызывает setState внутри componentWillUpdate или componentDidUpdate.React ограничивает количество вложенных обновлений для предотвращения бесконечных циклов.

Структура моего кода следующая:

COMPONENT: Parent

changeParentState(){
    this.setState({
       stateToChange: "something-changed"
    });
}
render(){
    return(
        <div> here the stepBar to update </div>
        <Switch>
             <Route path = '/step1' render = {() => <Step1Component attributes = {this.someAttributes}}/>
             <Route path = '/step2' render = {() => <Step2Component attributes = {this.changeParentState.bind(this)}}/>
        </Switch>
    );
}

COMPONENT Step1

render(){
  return(
     <button onClick = {() => {history.push({pathname: '/step2'})}}>next</button>
  )
}

КОМПОНЕНТ Шаг 2

constructor(props){
     super(props);
     this.props.changeParentState();  //error in parent when updating state
}

Здесь я пояснил проблему, надеюсь, я не опускаю код, который порождает мою проблему

Answer 1

вы не можете вызвать функцию из конструктора попробуйте

componentWillMount(){
  this.props.changeParentState();
}

я никогда раньше не использовал атрибуты, но предпочитаю

<Step2Component changeParentState = {this.changeParentState.bind(this)}}/>