ComponentDidMount бесконечный цикл

Question

Прежде всего, я хотел бы сказать, что я прочитал об этом предмете и до сих пор не могу понять, что происходит, поэтому извините заранее, если это дубликат.Компонент, который получает данные с сервера по componentDidMount, но каким-то образом он входит в бесконечный цикл.Я использую реагирующий маршрутизатор и Sagate redux, и родительский компонент указанного компонента также подключен к хранилищу ресурсов (я думаю, что это проблема).

Метод визуализации App.js:

render() {
console.log(this.props.isAuthenticated);
let routes = (
  <Switch>
    <Route path="/login" component={Login} />
    <Route path="/" exact component={Home} />
    <Redirect to="/" />
  </Switch>
);

if (this.props.isAuthenticated) {
  routes = (
    <Switch>
      <Route path='/logout' component={Logout} />
      <Route path='/data/people' component={People} />
      <Route path="/" exact component={Home} />
      <Redirect to="/" />
    </Switch>
  )
}

return (
  <div>
    <Layout>
      {routes}
    </Layout>
  </div>
);
}

Вызов для извлечения данных (Вызывается в People.js):

componentDidMount() {
  this.props.fetchPeople()
}

Редукционное соединение App.js:

const mapStateToProps = state => {
  return {
    isAuthenticated: state.login.token !== null,
    username: state.login.username
  };
};

const mapDispatchToProps = dispatch => {
  return {
    autoLogin: () => dispatch(actions.checkLoginState())
  }
};`

Редукционное соединение People.js:

const mapStateToProps = state => {
  return {
    people: state.data.people,
    loading: state.data.loading
  };
};

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

actions.fetchPeople вызывает эту сагу:

export function* fetchPeopleSaga () {
  try {
    yield put(actions.fetchPeopleStart());
    const people = yield axios.get('/data/people');
    yield put(actions.fetchPeopleSuccess(people));
  } catch (error) {
    yield put(actions.fetchPeopleFail(error));
  }
};

А вот соответствующий редуктор:

const initialState = {
  people: null,
  error: null,
  loading: false
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case actionTypes.FETCH_PEOPLE_START:
      return {
        ...state,
        loading: true
      }
    case actionTypes.FETCH_PEOPLE_SUCCESS:
      return {
        ...state,
        people: action.people,
        loading: false
      }
    case actionTypes.FETCH_PEOPLE_FAIL:
      return {
        ...state,
        people: null,
        error: action.error,
        loading: false
      }
    default:
      return state
  }
};

Как вы можете видеть, они даже не обращаются к одному и тому же реквизиту, поэтому я делаюНе понимаю, почему он входит в бесконечный рендеринг.

Помощь будет высоко ценится!

Answer 1

Вы можете добавить другое состояние loaded и установить его в значение true в случае FETCH_PEOPLE_SUCCESS или FETCH_PEOPLE_FAIL.Затем добавьте проверку загрузки и загрузки перед тем, как получать данные о людях, например:

if (!loaded && !loading) {
    this.props.fetchPeople()
}