React.js асинхронно получает ресурс из базы данных в `componentWillMount` - PullRequest
Новая
       16

React.js асинхронно получает ресурс из базы данных в `componentWillMount`

0 голосов
/ 04 июля 2018

Я пишу компонент реагирования, в котором при навигации компонент должен get немного json из БД async образом. В настоящее время мой код 

    constructor(props) {

        super(props);
        this.state = { name : false }

    }

    componentWillMount(){
        this.loadNameA()
        .then (_ => console.log('loaded NameContainer'))
        .catch(e => console.log(`Error ${e}`))
    }

где 

loadNameA = async () => {
    const val = await User.getName()
    // do some logic here
    this.setState({ name : val })
}

Я дважды запускал функцию loadNameA, оба раза с префиксом async. Один раз без вызова await User.getName() на бэкэнд и один раз с вызовом на бэкэнд. Когда я вызываю бэкэнд, я получаю сообщение об ошибке: 

Warning: Failed prop type: Invalid prop `value` supplied to `Editor`, expected a Slate `Value` but received: false

Это потому, что я инициализировал значение name, равное false в constructor. По сути, компонент монтируется без ожидания завершения асинхронного вызова, хотя я await получаю ответ от loadNameA. Как я могу убедиться, что компонент монтируется и его состояние соответствующим образом разрешается после вызова async?

1 Ответ

0 голосов
/ 04 июля 2018

Просто укажите свой render() метод для return if (!this.state.name).

См. Практический пример ниже. 

// App.
class App extends React.Component {

  // State.
  state = {name: false}
  
  // Render.
  render = () => <div>{this.state.name || 'Loading ..'}</div>
  
  // Did Mount.
  componentDidMount() {
    this.getName()
    .then(name => this.setState({name}))
  }
  
  // Get Name.
  getName = () => new Promise(r => 
    window.setTimeout(() => r('NAME'), 1000))
  
}

// Mount.
ReactDOM.render(<App/>, document.querySelector('#root'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
...