Ссылка на экземпляр реквизит после асинхронно - PullRequest
Новая
       12

Ссылка на экземпляр реквизит после асинхронно

0 голосов
/ 28 ноября 2018

Недавно я наткнулся на следующий код: 

import { Component } from 'react';
import { connect } from 'react-redux';

import { setUser } from './store';

const doSomeSideEffect = ({ firstName, lastName }) => document.title = `Hello ${firstName} ${lastName}`;

class App extends Component {
  state = {
    isLoading: false
  }

  async componentDidMount() {
    console.log(this.props.user); // some initial state like: { firstName: undefined, lastName: undefined, isAuthorized: false }
    if (!this.props.user.isAuthorized) await this.loadData();
    console.log(this.props.user); // { firstName: 'Foo', lastName: 'Bar', isAuthorized: true }
    doSomeSideEffect(this.props.user);
  }

  async loadData() {
    this.setState({ isLoading: true });

    const data = await new Promise(resolve => setTimeout(() => resolve({ firstName: 'Foo', lastName: 'Bar', isAuthorized: true }), 5000));
    this.props.setUser(data);

    this.setState({ isLoading: false });
  }

  render() {
    return this.state.isLoading ? 'Loading' : 'Loaded';
  }
}

export default connect(user => ({ user }), { setUser })(App);

Я знаю, что в конце концов это просто обычный Javascript, но меня смутила ссылка на this.props после await в componentDidMount, и этона самом деле код работает как положено.Кто-нибудь может сказать, является ли это хорошей или плохой практикой ссылаться на реквизит таким образом и почему?Разве это не относится к состоянию гонки?

...