Question

我正在使用react redux构建一个带有foursquare API的基本搜索应用程序。我收到json数据但是当我尝试打印地址，照片，提示时。我收到错误＆＃34;未找到＆＃34;哪里可以看到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但是当我试图打印地址，提示，照片或联系时，因为它们是一个对象。我收到了＃34;未找到＆＃34;错误。

所以我需要帮助从foursquare会场详细信息api请求访问提示，照片对象。

{Venue.tips} Screenshoot

{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中使用它。

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

此外，不要将componentWillMount生命周期钩子用于异步操作。请改用componentDidMount。因此，ComponentDetails组件中的请求应该是这样的：

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

阅读docs了解更多详情。另外，here就是一个例子。

Foursquare Api - 无法打印json数据

1 个答案: