Как исправить предупреждение в react-router v4?

Question

[Strax77]

Здравствуйте. Не могу разобраться в react-router.

Есть компонент Login, который должен перебрасывать на другую страницу при успешном входе.
Делаю это так(кстати, есть ли способ получше?):

class Login extends Component {
  constructor(props, state) {
    //...
   //какой-то слушатель websocket, в случае положительного ответа сервера в конце делает так:
   this.props.history.push('/main');
  }
}

компонент Login находится в компоненте Routes, что-то вроде:

const Routes = () => {
  return (
    <div>
      // ...
      <Route exact path="/login" component={Login}></Route>
      // ....
    </div>
  )
};

соответственно, он вызывается в корневом компоненте

// class такой-то 
render() {
  return (
   <Router> 
     <Routes/>    
   </Router>
  )
}

react на это дело ругается вот так:

Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op.

Please check the code for the Login component.

Как быть?

Answer 1

[Антон Спирин]

Ваша проблема решается так:

class Login extends Component {
  componentWillMount() {
    ...
    if(isLoggedIn) {
      this.props.history.push('/main');
    }
  }
  ...
}

Comments

[Strax77]

я чего-то не понимаю, либо я просто плохо объяснил что мне надо ((

в общем. приложение - чат на websockets. Login - это стартовое окно, куда перебрасывает со всех роутов если пользователь не авторизован.
собственно, это просто input для имени и кнопка submit. при нажатии на нее сокет эмитит что-то вроде
socket.emit('login', this.state.name);
в конструкторе Login сокет слушает событие 'login-status', которым сервер отвечает на вышеуказанный запрос сокета. в случае успеха (если имя свободно) программа устанавливает в состоянии что-то вроде {isLogin: true, .... } и меняет роут на Main

//я не нашел как еще можно программно изменить текущий роут в react-router v4
this.props.history.push('/main');

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

если что-то делаю не так, буду рад выслушать как надо!

[Антон Спирин]

Strax77, нельзя такое в конструкторе делать. Он вам и говорит прямым текстом. Используйте функции жизненного цикла.
componentDidMount - для выполнения действий(обращений к api и прочих) сразу после монтирования.
componentWillReciveProps - для обновления state по обновленным props.
componentDidUpdate - для выполнения действий в зависимости от изменений state и props
Пока компонент не смонтирован обновлять его нельзя.

[Strax77]

дошло, благодарю!

[Максим]

Антон Спирин,

componentWillMount - для выполнения действий(обращений к api и прочих) сразу после монтирования.

- вы наверное имели ввиду componentDidMount? Так как иначе, перевод: для выполнения действий ДО (will - будет) монтирования.
p.s. cc Strax77

[Антон Спирин]

Максим, да!!! componentWillMount - скоро затеприкейтят! Спасибо, поправил!
Strax77, обратите внимание.

Answer 2

[Lumore]

class Login extends Component {
  componentWillMount() {
    //какой-то слушатель websocket, в случае положительного ответа сервера в конце делает так:
    this.props.history.push('/main');
  }

  render() {
    return <div>Loading...</div>
  }
}