Question

我正在使用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,

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

的Eventbrite文档

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

这是我的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语句上方编写一个函数吗？

任何帮助表示赞赏

克雷格

Answer 1

这里的问题是event.logo为空（因为没有徽标），因此您无法访问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
    })
);

返回的结果没有徽标时出错

1 个答案: