时间戳

首页 > 解决方案 > 返回结果没有标识时出错

reactjs - 返回结果没有标识时出错

问题描述

我正在使用 Eventbrite API 创建一个带有 React 的应用程序。

该应用程序称为 Eventfinder，它允许您根据关键字、位置和给定时间搜索事件。

我遇到的问题是，当事件没有指定徽标时，我收到以下错误：

Unhandled Rejection (TypeError): Cannot read property 'url' of null
(anonymous function)
src/components/util/EventBrite.js:18
  15 | if (jsonResponse.events) {
  16 |   return jsonResponse.events.map(event => ({
  17 |     id: event.id,
> 18 |     logo: event.logo.url,
  19 |     date: event.start.local,
  20 |     name: event.name.text,
  21 |     url: event.url
View compiled
(anonymous function)
src/components/util/EventBrite.js:16
  13 |     return response.json();
  14 |   }).then(jsonResponse => {
  15 | if (jsonResponse.events) {
> 16 |   return jsonResponse.events.map(event => ({
  17 |     id: event.id,
  18 |     logo: event.logo.url,
  19 |     date: event.start.local,

这是有关添加事件的 Eventbrite 文档https://www.eventbrite.com/developer/v3/endpoints/events/

我试图添加一个“无图像”占位符并写一些内容，如果没有图像，则显示此占位符。但不幸的是，我无法让它工作。

这是我的 Eventbrite.js 文件：

const myToken = 'token hidden';

const EventBrite = {

  search(term, location, date, sortBy) {
    return fetch(`https://cors- 
anywhere.herokuapp.com/http://www.eventbriteapi.com/v3/events/search?token=token hidden&q=${term}&location.address=${location}&start_date.keyword=${date}&sort_by=${sortBy}`, {
          headers: {
            Authorization: `Bearer ${myToken}`,
            Origin: `http://localhost:3000`,
          }
        }).then(response => {
          return response.json();
        }).then(jsonResponse => {
      if (jsonResponse.events) {
        return jsonResponse.events.map(event => ({
          id: event.id,
          logo: event.logo.url,
          date: event.start.local,
          name: event.name.text,
          url: event.url
        }));
      }
    });

  }

}

export default EventBrite;

我需要在 return 语句上方编写一个函数吗？

非常感谢任何帮助

克雷格

标签： reactjs

解决方案

这里的问题event.logo是 null （因为没有徽标）所以您无法访问event.logo.url. 一种可能的解决方案是检查此值是否为null，如果是，则设置另一个徽标 url 或根本不设置。

为此，我正在使用这样的三元运算符：

if (jsonResponse.events) {
    return jsonResponse.events.map(event => ({
        id: event.id,
        logo: event.logo.url === null ? '' : event.logo.url,
        date: event.start.local,
        name: event.name.text,
        url: event.url
    })
);

推荐阅读