React组件生命周期API请求(React component lifecycle API request)

React组件生命周期API请求(React component lifecycle API request)

我正在尝试向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错误消息： bundle.js:44492 Uncaught TypeError: Cannot read property 'time' of null

我的猜测是我需要重新排序组件安装方法中的功能，但我不确定如何。

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 Profile component:

'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) }) }

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.

最满意答案

在组件的生命周期中的特定点执行各种方法。

componentWillMount在初始渲染发生之前执行一次。

componentDidMount在初始渲染后执行一次。

您在componentDidMount中装入componentDidMount时设置状态，但之前在componentWillMount使用它。

所以当你使用时：

let currentTime = this.state.time

它还没有定义，所以你得到一个Cannot read property 'time' of null 。

您应该在componentWillMount设置状态， render()将看到更新的状态，并且只有状态更改才会执行一次。

之后，一旦安装了组件，就可以执行对Foursquare API的调用，将定义状态中的time属性，这样它就不会再触发错误。

您可以在文档中获得有关组件生命周期的更多信息。

本文档还指出发送AJAX请求的首选方法是componentDidMount 。

如果要与其他JavaScript框架集成，使用setTimeout或setInterval设置计时器，或发送AJAX请求，请在此方法中执行这些操作。

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.