tmhn tmhn - 1 year ago 167
React JSX Question

React component lifecycle API request

I am trying to make a request to the FourSquare API which desires a time object being sent in the format of YYYYMMDD. I have written a function that produces the time object however I am having issues using it within my React app.

I make a call within my


'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) => {
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

.end((err, res) => {
if(err) return
let result = res.body

When I load app in Chrome I have the error message of:
bundle.js:44492 Uncaught TypeError: Cannot read property 'time' of null

My guess is that I need to re-order the functions within the component mounting methods, however I am unsure how to.

Answer Source

Various methods are executed at specific points in a component's lifecycle.

  • componentWillMount is executed once before the initial rendering occurs.

  • componentDidMount is executed once after the initial rendering.

You are setting your state when the component is mounted in componentDidMount but using it before in componentWillMount.

So when you're using:

let currentTime = this.state.time

It's not defined yet so you're getting an Cannot read property 'time' of null.

You should set your state in componentWillMount, the render() will see the updated state and will be executed only once despite the state change.

After that, once the component is mounted, you can execute your call to the Foursquare API, your time property in the state will be defined so it'll no longer trigger an error.

You can get more informations regarding components lifecycle in the documentation.

This documentation also states that the preferred method to send AJAX requests is componentDidMount.

If you want to integrate with other JavaScript frameworks, set timers using setTimeout or setInterval, or send AJAX requests, perform those operations in this method.