ComponentDidMount срабатывает дважды

Question

У меня проблема с перемещением между двумя маршрутами.Мой сценарий выглядит следующим образом:

У меня есть 2 маршрута: Route1 и Route2 - оба являются братьями и сестрами.

Допустим, я нахожусь на Маршруте 1, с которого я могуперейти к Route2 с переданными параметрами (всегда).Я исследовал ошибочное поведение при быстрой навигации следующим образом:

Route1 -> Route2 (param: 1) -> Route 1 -> Route 2 (param: 2)

Я поместил консольные журналы в Route2 componentDidMount, чтобы увидеть, что выводитсяследующее:

const { navigation } = this.props;
console.log(navigation.state.params.param);

К моему удивлению, если я буду быстро перемещаться, вывод для сценария выше будет:

1 
1 
2

В то время как ожидаемое поведение:

1
2

Есть идеи, что происходит?

Answer 1

Если вы используете стековый навигатор, то для каждой навигации применяется реагирующая навигация. При перемещении по ней маршрут перемещается в стек, поэтому в вашем случае стек заполнится следующим образом:

1. STACK [Route1]

2. STACK [Route2, Route1].// componentDidMount будет вызываться после печати 1

3. STACK [Маршрут1, Маршрут2, Маршрут1]

4. СТЕК [Маршрут2, Маршрут1, Маршрут2, Маршрут1] // тогда как здесь componentDidMount будет вызываться один раз для каждого проталкиваемого маршрута, печатая 1 и 2 для обоих маршрутов в стеке

Таким образом, в стеке будет два Route2 с разными параметрами.

Это способ реагирования-навигации.

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

• pop -вернуться в стек
• popToTop - перейти на вершину стека
• заменить - заменить текущий маршрут на новый

Answer 2

Когда вы переходите от Маршрута 2 к Маршруту 1, он входит справа или слева?Вероятно, он монтируется дважды, потому что реакция-навигация забавна таким образом: P

Возможно, вы также слишком быстро нажимаете кнопку.В этом случае отключите кнопку на несколько сотен мс после первого щелчка.

class Button extends React.Component {
  onPress = () => {
    if (this.props.disabled) return;
    if (this.canPress) {
      this.canPress = false;
      this.props.onPress();
      setTimeout(() => { this.canPress = true; }, this.props.pressTimeout || 500);
    }
  }
....