Как передать текущего user через socket io react?

data['nickname']; - здесь текущий пользователь
// 

const socket = io(':3000');
        user = '';
        socket.on('init', (data)=>{
            user = data['nickname'];
        }); 

class App extends React.Component {
....
}


Незадача заключается в том что вначале загружается реакт а user добавляется в конце

пробовал через componentWillMount
componentWillMount() {
        this.initSocket();
    }

    initSocket = () =>{

        // set user
        socket.on('init', (data)=>{
            this.state.player = data['nickname'];
            alert(this.state.player);
        });
....
    }
}


но при загрузке он всё ещё не определяется.

Как извлечь User из ноды чтобы можно было передать в компонент React?
  • Вопрос задан
  • 321 просмотр
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
componentDidMount() {
  this.initSocket();
}

initSocket() {

  // set user
  socket.on('init', data => {
    this.setState({
      player: data.nickname,
    }, () => {
      alert(this.state.player);
    });
  });
}


1. Используйте componentDidMount, вместо componentWillMount.
2. Никогда не меняйте state напрямую, для этого есть асинхронный метод setState. Иначе ваш компонент не обновится.
3. Эту логику лучше вынести из компонента в redux-saga или redux-thunk.
4. В самом компоненте пока не получили пользователя показывайте лоадер:
render() {
  const { user } = this.state;
  
  if (!user) return <Loader />  
  
  return (
   ...
  );
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы