Почему компонент React монтируется после каждого действия?

Question

У меня есть компонент React с именем Home, который вызывает действие для извлечения некоторых групп при монтировании компонента.

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

componentDidMount() {
    const { fetchRecentGroups } = this.props;
    fetchRecentGroups();
}

MyРедуктор прекрасно обрабатывает каждое действие и возвращает состояние следующим образом:

switch(action.type) {
    case REQUEST_GROUPS:
        return {
            ...state,
            loadState: FETCHING
        };
    case REQUEST_GROUPS_SUCCESS:
        return {
            ...state,
            loadState: SUCCESS,
            groups: action.data.groups,
            totalResults: action.data.totalResults
        };
    default:
        return state;
}

Я также использую connect HOC для этого компонента следующим образом:

const mapStateToProps = (state) => {
  return {}
}

const mapDispatchToProps = (dispatch) => {
  return {
    fetchRecentGroups: () => {
      dispatch(actions.fetchRecentGroups())
    }
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Home);

Home компонент находится внутри Route следующим образом:

<Route 
    exact={true} 
    path="/" 
    component={Home} 
/>

Моя проблема в том, что каждый раз, когда редуктор возвращает состояние, componentDidMount вызывается снова и снова в цикле.Я ожидаю, что монтирование произойдет только один раз при первой загрузке.

Если я добавлю функции componentDidUpdate и componentWillReceiveProps в мой компонент, они никогда не будут вызываться (только componentDidMount), поэтому я не могудля сравнения реквизитов.

Кто-нибудь знает, почему это может происходить?

РЕДАКТИРОВАТЬ:

Я обнаружил, что эта проблема вызвана этой частьюкода в моем маршруте:

const RouteBlock = () => {
  if(errorSettings) {
    return <Error {...errorSettings} />
  }
  return (
    <div className={styles.RouteBlock}>
      <Route exact={true} path="/" component={Home} />
      <Route path="/search" render={() => <div>SEARCH</div>} />
    </div>
  );
};

return <Router><RouteBlock /></Router>

Я изменил его на:

return <Router>{RouteBlock()}</Router>

Answer 1

Каждый раз, когда вы визуализируете свой компонент, вы немедленно вызываете функцию, которая устанавливает новое состояние, и запускаете повторный рендеринг вашего компонента.Возможно, вам следует использовать метод жизненного цикла shouldComponentUpdate, который проверит, совпадает ли ваше старое состояние с новым.

Ознакомьтесь с официальными документами: https://reactjs.org/docs/react-component.html#shouldcomponentupdate