Как отобразить состояние и отправить результаты во второй запрос Axios - PullRequest
Новая
       14

Как отобразить состояние и отправить результаты во второй запрос Axios

0 голосов
/ 05 июня 2018

Действительно застрял с этим.Я создаю простое веб-приложение ReactJS, в котором вы можете:

  1. Искать город
  2. Axios GET запрашивает API-интерфейс fourSquare и возвращает рекомендуемые места.

Просто!Единственное, этот публичный API для результатов мероприятия, больше не включает в себя фотографии!

Вот мой запрос axios:

https://api.foursquare.com/v2/venues/explore?near=london&&client_id=JUTTZIYT3Y2ECNHCORRDKIPLW1FNSAH2PW0XRLJCMIPRKY1Q&client_secret={REMOVED_CLIENT_SECRET}&v=201806044&venuePhotos=1

  componentDidMount() {
       console.log('COMPONENT DID MOUNT');

       axios.get('https://api.foursquare.com/v2/venues/explore?near=london&&client_id=JUTTZIYT3Y2ECNHCORRDKIPLW1FNSAH2PW0XRLJCMIPRKY1Q&client_secret={REMOVED_CLIENT_SECRET}&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)});
       });
  }

Затем я передаю результаты своих мест в другой компонент / страницу и перебираю все данные.Например, имя, адрес и т. Д. 

  return (
    <section className="">
      <h2 className="title has-text-centered">Heres what we recommend in London</h2>
      <div className="columns is-multiline">
        {places.map((place, i) => <div className="column is-one-quarter" key={i}>
          <ul>
            <li>
              <div className="card-image">
                <figure className="image">
                  <h2 className="has-text-centered has-text-grey">Venue: {place.venue.name}</h2>
                  <h2 className="has-text-centered has-text-grey">Category: {place.venue.categories[0].pluralName}</h2>
                  <h2 className="has-text-centered has-text-grey">Why?: {place.reasons.items[0].summary}</h2>
                  <p className="has-text-centered has-text-link">Address: {place.venue.location.formattedAddress}</p>
                  <p className="has-text-centered has-text-link">ID: {place.venue.id}</p>
                  {/* <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>
  );
};

ПРОБЛЕМА

Единственное, для того, чтобы получить фотографию места проведения, мне нужно разобратьидентификатор объекта во втором запросе API.Например, этот:

https://api.foursquare.com/v2/venues/VENUE ID Идет ЗДЕСЬ / фотографии? Client_id = JUTTZIYT3Y2ECNHCORRDKIPLW1FNSAH2PW0XRLJCMIPRKY1Q & client_secret = {УДАЛЕНО_CLIENT_SECR3030 *

*2830* * *1030* *2830* * * * * * * 3030через удостоверение личности места хорошо в моем JSX.Но я не знаю, как сохранить его из JSX.

За пределами JSX, скажем, в компоненте функции, я не могу циклически отображать данные для получения идентификатора места проведения.Я думаю, это потому, что это объект.

Вот скриншот того, как я пока зацикливаю свои данные.И консоль показывает идентификатор, к которому я пытаюсь добраться, и вставляю второй запрос ...

https://i.imgur.com/Rrv9MHN.jpg

Любые идеи о том, как я могу получить этот идентификатор и вставить его ввторой запрос axios?

...