React / Redux - Как вызвать действие после рендеринга компонента, на основе проверки - Получение ошибки - PullRequest
Новая
       26

React / Redux - Как вызвать действие после рендеринга компонента, на основе проверки - Получение ошибки

1 голос
/ 28 марта 2019

У меня есть, что должно быть простой проблемой, при которой, когда пользователь перемещается по определенному маршруту, компонент запускает начальный вызов функции, чтобы получить пользователя по идентификатору через redux-observable в эпопее. Однако, если пользователь уходит со страницы и затем возвращается, мне нужно иметь возможность перезагрузить страницу на основе параметра маршрута.

У меня есть компонент, который использует HOC для запуска метода render (), но он выглядит как тупой компонент: 

const ProfilePage = props => {
  const { actions, user, loading } = props;

  // Note: This if statement results in an error
  if (user && user.id !== props.params.id) {
   actions.initAction(props.params.id);
  }

  return (<div>Test</div>);
};

ProfilePage.propTypes = {
  actions: PropTypes.object,
  user: PropTypes.object,
  loading: PropTypes.bool,
};


export default connect(
  state => ({
    user: selectUser(state),
    loading: selectLoading(state),
  }),
  dispatch => ({ actions: bindActionCreators(Actions, dispatch) })
)(
  PureRender(
    onMount(props => props.actions.initAction(props.params.id))(ProfilePage)
  )
);

Это приводит к ошибке:

react-dom.development.js?61bb:506 Warning: Cannot update during an existing state transition (such as within 1010 * делают *

^ Это происходит из-за моего оператора if, который проверяет идентификатор пользователя по идентификатору параметра.

Нужно ли преобразовывать этот компонент в класс, чтобы использовать другие методы жизненного цикла, которые могли бы предотвратить возникновение этой ошибки, и соответственно запускать мои функции?

Ответы [ 2 ]

1 голос
/ 28 марта 2019

Компонент функции должен быть чистым, вы можете думать о них как о методе «рендеринга» компонента класса.
Вы можете использовать компонент класса и делать побочные эффекты в componentDidMount / componentDidUpdate, или использовать хуки с useEffect.

крючки useEffect / методы цикла класса

0 голосов
/ 28 марта 2019

Я предполагаю, что проблема с ProfilePage.Добавлена ​​ошибка Cannot update during an existing state transition (such as withinrender)., возникающая в основном при вызове setState, который является асинхронным методом, другой setState.Для вашего случая это функциональный компонент, который вы используете в методе рендеринга.Таким образом, в основном каждый раз, когда ваш компонент перерисовывается, вызывается функция ProfilePage, которая вызывает действие.Так что вы можете изменить ProfilePage на реагирующий компонент и использовать методы жизненного цикла, такие как componentDidMount, чтобы решить вашу проблему.Или, если вы используете реакцию 16 или выше, используйте хуки с useEffect.

...