Foursquare的API - 无法打印JSON数据(Foursquare Api - Unab

我建立一个基本的搜索应用程序使用反应终极版Foursquare的API。 我收到JSON数据，但是当我尝试打印地址，照片，提示。 我得到一个错误“未找到”在那里，我可以看到的console.log一切

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

    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

<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，但是当我试图打印地址，建议，照片或接触，因为它们的对象。 我收到了“未找到”的错误。

所以我需要访问的提示帮助，照片，从四方场地细节API请求对象。

{} Venue.tips截图

{} Venue.tips.count截图

Answer 1:

因为您收到此错误tips在venue对象是undefined ，直到请求被完成。 所以，你应该如果添加检查tips属性是一个存在venue对象。

例如，在您的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 。

在未来，比如，你可以处理isLoading在减速状态，显示加载，直到提示已准备好，并检查这个布尔而不是tips财产。 由你决定。

另外，不要使用componentWillMount对异步操作的生命周期挂钩。 使用componentDidMount代替。 所以，在要求ComponentDetails成分应该是这样的：

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

阅读文档的更多细节。 另外， 在这里工作的例子。

文章来源: Foursquare Api - Unable to print json data