Jsx не удалось скомпилировать неожиданный токен

Мне сложно понять ошибки в этом JSX-коде. Похоже, я применяю правильные общепринятые правила для JSX, но ниже я опубликовал отзывы, которые я получил с консоли, и, похоже, это связано с первым методом forEach внутри обещания.

    class EventQueries extends Component{
constructor(props){
super(props);

this.state = {
entertainer: null
}
}
render(){


return(

<div className = 'Immediate_Events'>
    <header className = 'ImmEventsTitle'>
        Upcoming Events
    </header>
    <div className = 'EventBlock'>
        {return this.props.queryEvent(this.props.query).then(() => this.props.queried_events.forEach(function(event){
        return (    <div>
            <span className = 'EventTitle'>JSON.parse(event["title"])</span>
            {this.props.artist_events ?
            this.props.artists_events.forEach((entertainer) => {
            return <span className = 'ArtistName'>
                <span onClick = {this.state.entertainer !== entertainer.name ? this.props.ParseEventsByArtist(entertainer.name, this.props.eventForecast).then(function(){this.setState({artist: entertainer.name})}) : null}>
                    entertainer.name
                </span>
            </span>}) :
            event.performers.forEach((entertainer) => { return <span className = 'ArtistName'>
                <span onClick = {this.state.entertainer !== entertainer.name ? this.props.ParseEventsByArtist(entertainer.name, this.props.eventForecast).then(function(){this.setState({artist: entertainer.name})}) : null}>
                    entertainer.name
                </span>
            </span>
            })
            }
            <span className = 'EventHappenstance'>JSON.parse(event["venue"]["name"])</span>
            <span className = 'EventAddress'>JSON.parse(event["venue"]["address"]), JSON.parse(event["venue"]["extended_address"])</span>
        </div>
        )
        }))
        }
    </div>

</div>
)
}
function mapStateToProps(state){
queried_events: state.eventOptions.queried_events
}

export default connect(mapStateToProps, {queryEvent})(EventQueries)

В консоли браузера я получаю взамен именно этот файл: EventQueries.js

Jsx не удалось скомпилировать неожиданный токен

Любая помощь будет оценена по достоинству. Спасибо.

Вы можете разделить свой код на более мелкие части, это будет намного легче отлаживать. Например, тернарный оператор - это примерно 10 строк кода. После <div className = 'EventBlock'> голый оператор return кажется неуместным. У вас в редакторе есть подсветка синтаксиса jsx? Это поможет.

Olga 07.06.2018 08:11
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
152
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вам нужно удалить оператор возврата отсюда:

<div className = 'EventBlock'>
  {return

По сути, вы вкладываете return в return. Там это не обязательно.

Ответ принят как подходящий

Это была простая ошибка. Мне просто нужно было добавить return перед queried_events в mapStateToProps, чтобы функция понимала, о чем имелось в виду this.props.queried_events.

Другие вопросы по теме