Javascript 糟糕的ComponentDidMount函数侵蚀了我的95000每日调用-ReactJS_Javascript_Reactjs_Api_Loops_Axios

Javascript 糟糕的ComponentDidMount函数侵蚀了我的95000每日调用-ReactJS

javascript reactjs api loops

Javascript 糟糕的ComponentDidMount函数侵蚀了我的95000每日调用-ReactJS,javascript,reactjs,api,loops,axios,Javascript,Reactjs,Api,Loops,Axios,我不确定我做错了什么。。。。我正在使用FourSquare应用程序制作一个简单的应用程序用户通过this.state.places输入地点并返回场地我正在循环浏览数据，以获取我需要的所有场馆信息。除了照片。。。我不得不写另一个axios请求，到另一个FourSquare API，这样我就可以得到那个场地ID的照片不知何故，我的ComponentDidMount函数已经达到了我的全部FourSquare报价限制。我的账户是免费的——每天95000个电话？？我不确定这个函数到底出了什么问题

我不确定我做错了什么。。。。我正在使用FourSquare应用程序制作一个简单的应用程序

用户通过this.state.places输入地点并返回场地

我正在循环浏览数据，以获取我需要的所有场馆信息。除了照片。。。我不得不写另一个axios请求，到另一个FourSquare API，这样我就可以得到那个场地ID的照片

不知何故，我的ComponentDidMount函数已经达到了我的全部FourSquare报价限制。我的账户是免费的——每天95000个电话？？我不确定这个函数到底出了什么问题

  componentDidMount() {
    axios.get('https://api.foursquare.com/v2/venues/explore?near=london&&client_id=MY_CLIENT_ID&client_secret=MY_CLIENT_SECRET&v=201806044&venuePhotos=1')
      .then((res) => {
        // RES VENUE DATA IS STORED IN PLACES
        this.setState(
          { places: res.data.response.groups[0].items.slice(0,12)});

        // LOOP THROUGH PLACES RES AND PULL OUT THE VENUE ID.
        for(var i = 0; i < this.state.places.length; i++) {
          const photosID = this.state.places[i].venue.id;
          console.log(this.state.places[i].venue.id);

          // NOW TAKE THE VENUE ID AND PLACE IT IN THIS SECOND API REQUEST
          return axios.get(`https://api.foursquare.com/v2/venues/${photosID}/photos?client_id=MY_CLIENT_ID&client_secret=MY_CLIENT_SECRET&v=20130815&ll=40.7,-74`);
        }
      })
      // THEN CONSOLE LOG THIS PHOTO RES DATA.
      .then((res) => {
        console.log('IDS RES:', res.data.response.photos.items[1]);
        // console.log('IDS RES:', res.data.response.photos.items[1].prefix.concat(res.data.response.photos.items[1].suffix));
      })
      .catch((err) => {
        console.log(err);
      });
  }

完整代码

import React from 'react';
import axios from 'axios';

import Header from '../components/header';
import Navbar from '../components/Navbar';
import Results from '../components/Results';

import './index.css';

class Layout extends React.Component {

  constructor() {
    super();
    console.log('CONSTRUCTOR');

    this.state = {
      places: [],
      searchData: '',
      photos: [],
      city: 'London'
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  // COMPONENT WILL MOUNT
  componentWillMount() {
    console.log('COMPONENT WILL MOUNT');
  }


  //
  componentDidMount() {
    axios.get('https://api.foursquare.com/v2/venues/explore?near=london&&client_id={MYCLIENTID}&client_secret={MYCLIENT_SECRET}&venuePhotos=1')
      .then((res) => {
        // RES VENUE DATA IS STORED IN PLACES
        this.setState(
          { places: res.data.response.groups[0].items.slice(0,12)});
        console.log(res.data.response.groups[0].items.slice(0,12));

        // LOOP THROUGH PLACES RES AND PULL OUT THE VENUE ID.
        for(var i = 0; i < this.state.places.length; i++) {
          const photosID = this.state.places[i].venue.id;
          console.log(this.state.places[i].venue.id);

          // NOW TAKE THE VENUE ID AND PLACE IT IN THIS SECOND API REQUEST
          return axios.get(`https://api.foursquare.com/v2/venues/${photosID}/photos?client_id={MYCLIENT}&client_secret={MYCLIENT}&ll=40.7,-74`);
        }
      })
      // THEN CONSOLE LOG THIS PHOTO RES DATA.
      .then((res) => {
        console.log('IDS RES:', res.data.response.photos.items[1]);
        // console.log('IDS RES:', res.data.response.photos.items[1].prefix.concat(res.data.response.photos.items[1].suffix));
      })
      .catch((err) => {
        console.log(err);
      });
  }

  // MAKE AXIOS REQUEST/COMPONENT DID MOUNT
  // componentDidMount() {
  //   console.log('COMPONENT DID MOUNT');
  //
  //   axios.get('https://api.foursquare.com/v2/venues/explore?near=london&&client_id={MYCLIENT}&client_secret={MYCLIENT}&venuePhotos=1')
  //     .then(res => {
  //       // console.log('DATA', res.data.response.groups[0].items);
  //       this.setState(
  //         { places: res.data.response.groups[0].items.slice(0,12)});
  //       this.setState(
  //         { photos: res.data.response.groups[0].items.slice(0,12)});
  //     });
  // }

  // MAKE AXIOS REQUEST/COMPONENT DID MOUNT
  // componentDidMount() {
  //   console.log('COMPONENT DID MOUNT');
  //
  //   axios.get('https://api.foursquare.com/v2/venues/explore?near=london&&client_id={MYCLIENT}&client_secret={MYCLIENT}&v=201806044&venuePhotos=1')
  //     .then(res => {
  //       // console.log('DATA', res.data.response.groups[0].items);
  //       this.setState(
  //         { places: res.data.response.groups[0].items.slice(0,12)});
  //       this.setState(
  //         { photos: res.data.response.groups[0].items.slice(0,12)});
  //     });
  // }

  // LISTEN TO FORM ENTRY/HANDLE CHANGE
  handleChange(e) {
    this.setState({ searchData: e.target.value }, () => console.log(this.state.searchData));
  }

  // CHANGE RESULTS AND APPLY SEARCH TERM TO AXIOS REQUEST
  handleSubmit(e){
    e.preventDefault();
    console.log(this.state.searchData);
    this.setState({ city: this.state.searchData });
    axios.get(`https://api.foursquare.com/v2/venues/explore?near=${this.state.searchData}&client_id={MYCLIENT}&client_secret={MYCLIENT}`)
      .then(res => {
        this.setState({ places: res.data.response.groups[0].items.slice(0,12)});
        // console.log(res.data.response.groups[0].items);
      });
  }


  render() {
    return(
      <div className="animated fadeIn">

        <Navbar />
        <Header
          handleChange={this.handleChange}
          handleSubmit={this.handleSubmit}
        />
        <Results
          places={this.state.places}
          photos={this.state.photos}
          city={this.state.city}
        />
      </div>
    );
  }
}


export default Layout;

export const query = graphql`
  query SiteTitleQuery {
    site {
      siteMetadata {
        title
      }
    }
  }
`;

从“React”导入React；
从“axios”导入axios；
从“../components/Header”导入标题；
从“../components/Navbar”导入Navbar；
从“../components/Results”导入结果；
导入“./index.css”；
类布局扩展了React.Component{
构造函数（）{
超级（）；
console.log（'CONSTRUCTOR'）；
此.state={
地点：[]，
搜索数据：“”，
照片：[]，
城市：“伦敦”
};
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
//组件将安装
组件willmount（）{
log（'组件将安装'）；
}
//
componentDidMount（）{
axios.get（）https://api.foursquare.com/v2/venues/explore?near=london&&client_id={MYCLIENTID}&client_secret={MYCLIENT_secret}&venuePhotos=1'）
。然后（（res）=>{
//RES场馆数据存储在不同的位置
这是我的国家(
{places:res.data.response.groups[0].items.slice（0,12）}）；
log（res.data.response.groups[0].items.slice（0,12））；
//在PLACES RES中循环并拉出场地ID。
for（var i=0；i{
log（'IDS RES:'，RES.data.response.photos.items[1]）；
//console.log（'IDS RES:'，RES.data.response.photos.items[1]。prefix.concat（RES.data.response.photos.items[1]。后缀））；
})
.catch（（错误）=>{
控制台日志（err）；
});
}
//发出AXIOS请求/组件未安装
//componentDidMount（）{
//log（'COMPONENT do MOUNT'）；
//
//axios.get（）https://api.foursquare.com/v2/venues/explore?near=london&&client_id={MYCLIENT}&client_secret={MYCLIENT}&venuePhotos=1'）
//。然后（res=>{
////console.log（'DATA'，res.DATA.response.groups[0].items）；
//这是我的国家(
//{places:res.data.response.groups[0].items.slice（0,12）}）；
//这是我的国家(
//{photos:res.data.response.groups[0].items.slice（0,12）}）；
//     });
// }
//发出AXIOS请求/组件未安装
//componentDidMount（）{
//log（'COMPONENT do MOUNT'）；
//
//axios.get（）https://api.foursquare.com/v2/venues/explore?near=london&&client_id={MYCLIENT}&client_secret={MYCLIENT}&v=201806044&venuePhotos=1'）
//。然后（res=>{
////console.log（'DATA'，res.DATA.response.groups[0].items）；
//这是我的国家(
//{places:res.data.response.groups[0].items.slice（0,12）}）；
//这是我的国家(
//{photos:res.data.response.groups[0].items.slice（0,12）}）；
//     });
// }
//倾听表单输入/处理更改
手变（e）{
this.setState（{searchData:e.target.value}，（）=>console.log（this.state.searchData））；
}
//更改结果并将搜索词应用于AXIOS请求
handleSubmit（e）{
e、 预防默认值（）；
console.log（this.state.searchData）；
this.setState（{city:this.state.searchData}）；
axios.get(`https://api.foursquare.com/v2/venues/explore?near=${this.state.searchData}&client_id={MYCLIENT}&client_secret={MYCLIENT}`）
。然后（res=>{
this.setState（{places:res.data.response.groups[0].items.slice（0,12）}）；
//console.log（res.data.response.groups[0].items）；
});
}
render（）{
返回(
);
}
}
导出默认布局；
export const query=graphql`
查询站点标题查询{
场地{
站点元数据{
标题
}
}
}
`;

添加了JSX:

import React from 'react';
// import axios from 'axios';

const Results = () => {

  // for(var i = 0; i < photos.length; i++) {
  //   const photosID = photos[i].venue.id;
  //   console.log(photos[i].venue.id);
  //
  //   axios.get(`https://api.foursquare.com/v2/venues/${photosID}/photos?client_id={MYCLIENTID}&client_secret={MYCLIENTSECRET}&v=20130815&ll=40.7,-74`)
  //     .then(res => {
  //       console.log('IDS RES:', res.data.response.photos.items[1]);
  //       // console.log('IDS RES:', res.data.response.photos.items[1].prefix.concat(res.data.response.photos.items[1].suffix));
  //     });
  // }



  return (
    <section>
      <h3 className="title has-text-centered">Top 9 Recommendations for {city}</h3>
        <div className="columns is-multiline">
          {places.map((place, i) => <div className="column is-one-third" key={i}>
            <ul>
              <li>
                <div className="card-image box">
                  <figure className="">
                    <img className="image" src="https://s3-eu-west-1.amazonaws.com/video.gallereplay.com/artistarea/Restaurant%20at%20night_23376c1c-7d1e-4d6f-8efb-c581529540fb/Cinemagraph_plain/1280x720/cinemagraph.jpg"/>
                    <h4 className="has-text-left purple">{place.venue.name}</h4>
                    <h5 className="has-text-left has-text-grey">Category: {place.venue.categories[0].pluralName}</h5>
                    <h5 className="has-text-left has-text-grey">Why? {place.reasons.items[0].summary}</h5>
                    <h5 className="has-text-left has-text-link">Address: {place.venue.location.formattedAddress.slice(0,4)}</h5>
                    <h5 className="has-text-left has-text-link">ID: {place.venue.id}</h5>
                    {/* <img className="animated rotateIn" src={place.venue.categories[0].icon.prefix.concat(place.venue.categories[0].icon.suffix)}/> */}
                  </figure>
                </div>
              </li>
            </ul>
          </div>)}
        </div>

    </section>
  );
};

export default Results;

从“React”导入React；
//从“axios”导入axios；
常量结果=（）=>{
//对于（var i=0；i{
//log（'IDS RES:'，RES.data.response.photos.items[1]）；
////console.log（'IDS RES:'，RES.data.response.photos.items[1].前缀.concat（RES.data.response.photos.items[1].后缀））；
//     });
// }
返回(
对{城市}的前9项建议
{places.map（（place，i）=>


{地点.地点.名称}
类别：{地点.地点.类别[0].复数名}
为什么？{place.reasons.items[0].summary}
地址：{place.vention.location.formattedAddress.slice（0,4）}
ID:{place.vention.ID}
{/*  */}


)}
);
};
导出默认结果；

我阅读了文档，在您的代码中没有发现任何奇怪的地方，但是我看到您的URL使用了不同的参数，然后在t上指定了这些参数

import React from 'react';
// import axios from 'axios';

const Results = () => {

  // for(var i = 0; i < photos.length; i++) {
  //   const photosID = photos[i].venue.id;
  //   console.log(photos[i].venue.id);
  //
  //   axios.get(`https://api.foursquare.com/v2/venues/${photosID}/photos?client_id={MYCLIENTID}&client_secret={MYCLIENTSECRET}&v=20130815&ll=40.7,-74`)
  //     .then(res => {
  //       console.log('IDS RES:', res.data.response.photos.items[1]);
  //       // console.log('IDS RES:', res.data.response.photos.items[1].prefix.concat(res.data.response.photos.items[1].suffix));
  //     });
  // }



  return (
    <section>
      <h3 className="title has-text-centered">Top 9 Recommendations for {city}</h3>
        <div className="columns is-multiline">
          {places.map((place, i) => <div className="column is-one-third" key={i}>
            <ul>
              <li>
                <div className="card-image box">
                  <figure className="">
                    <img className="image" src="https://s3-eu-west-1.amazonaws.com/video.gallereplay.com/artistarea/Restaurant%20at%20night_23376c1c-7d1e-4d6f-8efb-c581529540fb/Cinemagraph_plain/1280x720/cinemagraph.jpg"/>
                    <h4 className="has-text-left purple">{place.venue.name}</h4>
                    <h5 className="has-text-left has-text-grey">Category: {place.venue.categories[0].pluralName}</h5>
                    <h5 className="has-text-left has-text-grey">Why? {place.reasons.items[0].summary}</h5>
                    <h5 className="has-text-left has-text-link">Address: {place.venue.location.formattedAddress.slice(0,4)}</h5>
                    <h5 className="has-text-left has-text-link">ID: {place.venue.id}</h5>
                    {/* <img className="animated rotateIn" src={place.venue.categories[0].icon.prefix.concat(place.venue.categories[0].icon.suffix)}/> */}
                  </figure>
                </div>
              </li>
            </ul>
          </div>)}
        </div>

    </section>
  );
};

export default Results;

https://api.foursquare.com/v2/venues/${photosID}/photos?client_id=MY_CLIENT_ID&client_secret=MY_CLIENT_SECRET&v=20130815&ll=40.7,-74`

https://api.foursquare.com/v2/venues/${photosID}/photos

componentDidMount() {
   const exploreURL = 'https://api.foursquare.com/v2/venues/explore?near=london&&client_id=MY_CLIENT_ID&client_secret=MY_CLIENT_SECRET&v=201806044&venuePhotos=1';

   axios.get(exploreURL)
     .then(response => {
       //Store our fetch requests generated in the for loop
       var requests = [];
       // RES VENUE DATA IS STORED IN PLACES
       const places = response.data.response.groups[0].items.slice(0, 12);

       // LOOP THROUGH PLACES RES AND PULL OUT THE VENUE ID.
       for (var i = 0; i < places.length; i++) {
         const venueId = places[i].venue.id;
         console.log(venueId);

         // NOW TAKE THE VENUE ID AND PLACE IT IN THIS SECOND API REQUEST
         //Add request to all requests array
         requests.push(axios.get(`https://api.foursquare.com/v2/venues/${venueId}/photos`));
       }

        //This promise reolves when all requests have been resolved
        return Promise.all(requests);
     })
     // THEN CONSOLE LOG THIS PHOTO RES DATA.
     .then((res) => {
       console.log(res);
     })
     .catch((err) => {
       console.log(err);
     });
 }