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

Question

[Александр Иванов]

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?

Comments

[Максим]

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

[Александр Иванов]

user

Answer 1

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

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 (
   ...
  );
}

Comments

[Александр Иванов]

Столкнулся с проблемой обновления параметра this.state.player

if(this.state.player = 1){
                this.setState({ turn: '0' });
            } else if (this.state.player = 2){
                this.setState({ turn: 'X' });
            }

Такая конструкция изменяет this.state.player как проверять эти state?