Foursquare Api-无法打印json数据 [英] Foursquare Api - Unable to print json data

问题描述

我正在使用React Redux使用Foursquare API构建基本的搜索应用程序.我正在接收json数据，但是当我尝试打印地址，照片和提示时.我收到一个错误找不到"，在那里我可以在console.log中看到所有内容

I am building a basic search app with foursquare API using react redux. I am receiving json data but when I try to print address, photos, tips. I am getting an error "Not found" where as I can see everything in console.log

Action.js

Action.js

    export const fetchVenues = (place, location) => dispatch => {
  fetch(`https://api.foursquare.com/v2/venues/search?near=${location}&query=${place}&limit=10&client_id=${api_id}&client_secret=${api_key}&v=20180323`)
    .then(res => res.json())
    .then(data => dispatch({ type: SEARCH_VENUES, payload: data.response.venues}))
    .catch(err => console.log(err));
}

export const fetchVenueDetail = (venueId) => dispatch => {
  fetch(`https://api.foursquare.com/v2/venues/${venueId}?client_id=${api_id}&client_secret=${api_key}&v=20180323`)
    .then(res => res.json())
    .then(data => dispatch({ type: FETCH_VENUE, payload: data.response.venue })
    )
    .catch(err => console.log(err));
}

Reducer.js

Reducer.js

    const initialState = {
  venues: [],
  venue: {}
}

const venueReducer = (state= initialState, action) => {
  switch(action.type) {
    case SEARCH_VENUES:
      return {
        ...state, venues: action.payload
      }  

    case FETCH_VENUE:
      return {
        ...state, venue: action.payload
      }
    default:
      return state;
  }
}

Sidebar.js

Sidebar.js

<aside className="sidebar tips-sidebar">
        <h3>Tips</h3>
        <ul className="sidebar__list">
          {venue.tips.count}
            <li className="sidebar__listItem">
              <Link to="#" className="sidebar__listItemLink">
                <div className="left">
                  <img src="/image/background.jpg" alt="Tips" className="tips-image" />
                </div>
                <div className="right">
                  <h4>Arzu sendag</h4>
                  <p>guzei mekan cok serdim.</p>
                </div>
              </Link>
            </li>

        </ul>
        <Link to="#" className="allTips">All Tips</Link>
      </aside>;

所以我的问题是我收到JSON，但是当我尝试打印地址，提示，照片或联系人时，它们是对象.我收到未找到"错误.

So my problem is I am receiving the JSON but when I am trying to print address, tips, photos or contact as they are an object. I am receiving the "not found" error.

因此，我需要帮助来访问提示，以及来自foursquare场地详细信息api请求的照片对象.

So i need help for accessing tips, photos object from foursquare venue detail api request.

{Venue.tips}屏幕截图

{Venue.tips} Screenshoot

{Venue.tips.count}屏幕截图

{Venue.tips.count} Screenshot

推荐答案

您将收到此错误，因为在请求完成之前，venue对象中的tips是undefined.因此，应该添加检查venue对象中是否存在tips属性.

You are getting this error because tips in venue object is undefined until request is done. So, you should add check if tips property is exists in a venue object.

例如，在您的 RenderSidebar 组件中:

case "tips":

    // check if tips is exists in venueTips object
    // else make it empty to avoid error
    const { tips = {} } = venueTips

    template = <aside className="sidebar tips-sidebar">
        <h3>Tips</h3>
        <ul className="sidebar__list">
          {tips.count}
          <li className="sidebar__listItem">
            <Link to="#" className="sidebar__listItemLink">
              <div className="left">
                <img src="/image/background.jpg" alt="Tips" className="tips-image" />
              </div>
              <div className="right">
                <h4>Arzu sendag</h4>
                <p>guzei mekan cok serdim.</p>
              </div>
            </Link>
          </li>
        </ul>
        <Link to="#" className="allTips">
          All Tips
        </Link>
      </aside>;
    break;

请注意，Sidebar组件并不总是带有venueTips对象，因此最好在特定的case中使用它.

Please notice, that Sidebar component not always take venueTips object so it's better to use it in a particular case.

例如，将来，您可以在reducer中处理isLoading状态，并显示加载，直到技巧准备就绪，然后检查此布尔值而不是tips属性.由你决定.

In future, for instance, you can handle isLoading state in reducer, and display loading until tips is ready and check this boolean instead of tips property. It's up to you.

此外，请勿将componentWillMount生命周期挂钩用于异步操作.使用componentDidMount代替. 因此，ComponentDetails组件中的请求应如下所示:

Also, don't use componentWillMount lifecycle hook for asynchronous operations. Use componentDidMount instead. So, request in ComponentDetails component should be like this:

componentDidMount() {
    this.props.fetchVenueDetail(this.props.match.params.id);
}

有关详细信息，请阅读文档.另外，此处是有效的示例.

Read the docs for more details. Also, here is working example.

这篇关于Foursquare Api-无法打印json数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！