Foursquare Api - 无法打印 json 数据

Question

我正在使用 react redux 使用 foursquare API 构建一个基本的搜索应用程序。我正在接收 json 数据，但是当我尝试打印地址、照片和提示时。我收到一个错误 "Not found"，因为我可以在 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 但是当我尝试打印地址、提示、照片或联系人时，因为它们是一个对象。我收到 "not found" 错误。

所以我需要帮助来访问来自 foursquare 场所详细信息的提示、照片对象 api 请求。

{Venue.tips} 截图

{Venue.tips.count} 截图

Answer 1

您收到此错误是因为 venue 对象中的 tips 在请求完成之前为 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.

中使用它

将来，例如，您可以在 reducer 中处理 isLoading 状态，并在提示准备好之前显示加载并检查此布尔值而不是 tips 属性。由你决定。

此外，不要对异步操作使用 componentWillMount 生命周期挂钩。请改用 componentDidMount。所以，在 ComponentDetails 组件中的请求应该是这样的：

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

阅读 docs for more details. Also, here 工作示例。

Foursquare Api - 无法打印 json 数据

Foursquare Api - Unable to print json data

arrays

json

foursquare

reactjs

redux