Arrays Foursquare Api-无法打印json数据

我正在使用react redux构建一个带有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>;

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

{地点.提示}截图


{地点.提示.计数}屏幕截图

您收到此错误是因为
场馆中的
提示
对象在请求完成之前未定义。因此，您应该添加检查
tips
属性是否存在于
vention
对象中

例如，在渲染器DEBAR组件中：

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;

有关更多详细信息，请阅读。还有，这是一个有效的示例。
确切的错误是什么？您试图在代码中打印什么？我正在尝试访问类似于{vention.tips}的提示，因此它是有效的。但是当我尝试进入像这样的tips对象{vention.tips.count}时，我得到了一个找不到的错误计数。
{vention.tips}
有效吗？是的，它给了我一个包含计数和组数组的对象。他没有按照你的示例工作。我正在尝试，但错误仍然存在。@MontyGoldy我已经更新了沙盒。好像我以前刚抄过你的。看看第66行。它应该像预期的那样工作。有没有更好的方法来访问json数据中的所有对象。每个对象都有相同的错误我是否必须检查每个n个对象是的，或者您可以在渲染中这样做：
{venueTips.tips&&venueTips.tips.count}
{venueTips.anotherObj&&venueTips.anotherObj.property}
注意，您应该在特定的
案例中执行此操作，因为正如我之前所说的，
venueTips
并没有传递到每个边栏组件。另一个解决方法是在
venueducer
中更改您的
initialState
，如果您知道应该使用哪些属性，则创建更深入的对象。如下所示：
constinitialstate={viouses:[]，viouse:{tips:{}，另一个参数：{}}
componentDidMount() {
    this.props.fetchVenueDetail(this.props.match.params.id);
}