Запросить API жизненного цикла компонента реакции

Question

Я пытаюсь сделать запрос к API FourSquare, который желает, чтобы объект времени отправлялся в формате YYYYMMDD. Я написал функцию, которая создает объект времени, однако у меня возникают проблемы с его использованием в моем приложении React.

я сделать вызов в моей Profile компонента:

'use strict' 

import React, { Component } from 'react' 
import request from 'superagent' 

import TimeService from './services/time' 
import config from './config' 

class Profile extends Component { 

componentDidMount() { 
    TimeService.getCurrentTime((err, currentDate) => { 
    this.setState({ 
     time: currentDate 
    }) 
    }) 
} 

componentWillMount() { 

    let currentTime = this.state.time 
    let venue = '4dd64e9de4cd37c8938e7b83' 
    //let venue = this.props.venueId 
    let clientId = config.CLIENT_ID 
    let clientSecret = config.CLIENT_SECRET 

    request.get(`https://api.foursquare.com/v2/venues/${venue}/hours/?\&client_id=${clientId}&client_secret=${clientSecret}&v=${currentTime}`) 
    .accept('json') 
    .end((err, res) => { 
     if(err) return 
     let result = res.body 
     console.log(res.body) 
     console.log(result.response.hours.timeframes) 
    }) 
} 

Когда я загружаю приложение в Chrome у меня есть сообщение об ошибке: bundle.js:44492 Uncaught TypeError: Cannot read property 'time' of null

Я полагаю, что мне нужно изменить порядок функций в методах монтажа компонентов, однако я не уверен, как это сделать.

Answer 1

Различные методы выполняются в определенных точках жизненного цикла компонента.

• componentWillMount Выполняется один раз до первоначального рендеринга.

• componentDidMount выполнен после первоначального рендеринга.

Вы настраиваете свое состояние, когда компонент установлен в componentDidMount, но использовать его, прежде чем в componentWillMount.

Так что, когда вы используете:

let currentTime = this.state.time 

Это не определено еще так что вы получаете в Cannot read property 'time' of null.

Вы должны установить свое состояние в componentWillMount, render() будет видеть обновленное состояние и будет выполняться только один раз, несмотря на изменение состояния.

После этого, как только компонент будет установлен, вы можете выполнить свой вызов в API Foursquare, ваше свойство time в состоянии будет определено, чтобы оно больше не вызывало ошибку.

Дополнительную информацию о жизненном цикле компонентов можно получить в the documentation.

В этой документации также указывается, что предпочтительным методом отправки запросов AJAX является componentDidMount.

Если вы хотите интегрироваться с другими фреймворками JavaScript, установите таймеры с помощью setTimeout или setInterval или отправьте запросы AJAX, выполните эти операции в этом методе.