React組件生命週期API請求

我正在嘗試向希望以YYYYMMDD格式發送時間對象的FourSquare API發出請求。我寫了一個產生時間對象的函數，但是我在使用React應用程序時遇到了問題。React組件生命週期API請求

我讓我的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

我的猜測是，我需要重新排序功能在組件安裝方法中，但我不確定如何。

來源

2016-08-13 tmhn

我們處理了很多與從React生命週期方法中獲取數據相關的類似競爭條件。最後，我們決定將它抽象爲一個庫，以便我們的開發人員不需要考慮任何這些問題：https://github.com/DigitalGlobe/jetset – glortho

在組件生命週期中的特定點執行各種方法。

componentWillMount在初始渲染髮生之前執行一次。
componentDidMount在初始渲染後執行一次。

你設置你的狀態時，該組件被安裝在componentDidMount但componentWillMount之前使用它。

因此，當你使用：

let currentTime = this.state.time

這不是定義尚未所以你得到了Cannot read property 'time' of null。

您應該將您的狀態設置爲componentWillMount，render()將看到更新的狀態，並且只會在狀態發生變化時執行一次。

之後，一旦組件被安裝，您可以執行您的Foursquare API調用，您的狀態time屬性將被定義，以便它不會再觸發錯誤。

您可以在the documentation中獲得更多關於組件生命週期的信息。

本文檔還指出發送AJAX請求的首選方法是componentDidMount。

如果您想要與其他JavaScript框架集成，使用setTimeout或setInterval設置定時器，或發送AJAX請求，請使用此方法執行這些操作。

來源

2016-08-13 11:49:40 HiDeo

謝謝，我已經做出了更改，並且已經有效。我在以前的項目中遇到過React Native的類似問題，所以我認爲它也是類似的補救措施 – tmhn

是的，關於此問題，React Native的生命週期是相同的。 – HiDeo

React組件生命週期API請求

回答

相關問題