コンポーネントライフサイクルAPIリクエストの返信

Question

FourSquare APIに対して、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は、最初のレンダリングが発生する前に1回実行されます。

• componentDidMountは、最初のレンダリング後に1回実行されます。

あなたは部品がcomponentDidMountに装着されたとき、あなたの状態を設定するが、componentWillMountで前にそれを使用しています。

あなたが使用しているとき：

let currentTime = this.state.time 

それはまだを定義されていないはあなたがCannot read property 'time' of nullを取得しています。

componentWillMountに状態を設定する必要があります。render()には更新された状態が表示され、状態が変化しても1回だけ実行されます。

その後、コンポーネントがマウントされるとFoursquare APIへの呼び出しを実行することができます。time州のプロパティが定義され、エラーが発生しなくなります。

コンポーネントのライフサイクルに関する詳細はthe documentationにあります。

このドキュメントでは、AJAX要求を送信するための優先メソッドがcomponentDidMountであることも示しています。

他のJavaScriptフレームワークと統合する場合は、setTimeoutまたはsetIntervalを使用してタイマーを設定するか、AJAXリクエストを送信するには、このメソッドでこれらの操作を実行します。