Метод жизненного цикла componentDidMount вызывается дважды во время начальной загрузки компонента (rendered-remove-rendered)

Question

У меня есть два компонента, где в моем методе жизненного цикла componentDidMount я делаю запрос вызова ajax для получения всех элементов с сервера.

//Routes in primary parent component that render 2 components
    <div className="primary">
      <Switch>
        <Route path="/admin/manage-regions" exact component={() => 
              <ManageRegions />} />
        <Route path="/admin/manage-practices" exact component={() => 
               <ManagePractices />} />
      </Switch>
    </div>
//First component
  componentDidMount() {
    console.log('called twice');
    const { getAllRegionsAction } = this.props;
    getAllRegionsAction({ path: 'regions', filterName: 'regions' });
  }

//Second component
 componentDidMount() {
    console.log('called twice');
    const { getAllPracticesAction } = this.props;
    getAllPracticesAction({ path: 'practice', filterName: 'practices' });
  }


export default connect(
 null,
  {
    getAllRegionsAction: getAllFilters,
  },
)(MyFirstComponent);

export default connect(
 null,
  {
    getAllPracticesAction: getAllFilters,
  },
)(MySecondComponent);

Проблема в том, что мой метод componentDidMount вызывается дважды.Из-за этого я помещаю два действия (GET_ALL_FILTERS) в свое хранилище вместо одного, поэтому я получаю два ответа от сервера вместо одного.Это выглядит так: «компонент-визуализирован-компонент-удален-компонент-визуализирован» (даже визуально).Я проверил это в методе componentWillUnmount.Действительно, во время начальной загрузки компонент визуализируется, затем удаляется, затем вызывается другой рендер, поэтому я получил два console.log в componentDidMount.После некоторых исследований подобных проблем я попытался поиграть с роутерами, оставить только один компонент и так далее ... но ничего не помогает.componentDidMount по-прежнему вызывается дважды.

Answer 1

Находятся ли компоненты на одной странице?Если да, просто сделайте запрос в родительском компоненте.Если нет, вы можете поиграть в кеширование.