Мне сложно понять ошибки в этом 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
Любая помощь будет оценена по достоинству. Спасибо.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Вам нужно удалить оператор возврата отсюда:
<div className = 'EventBlock'>
{return
По сути, вы вкладываете return в return. Там это не обязательно.
Это была простая ошибка. Мне просто нужно было добавить return перед queried_events в mapStateToProps, чтобы функция понимала, о чем имелось в виду this.props.queried_events.
Вы можете разделить свой код на более мелкие части, это будет намного легче отлаживать. Например, тернарный оператор - это примерно 10 строк кода. После
<div className = 'EventBlock'>голый оператор return кажется неуместным. У вас в редакторе есть подсветка синтаксиса jsx? Это поможет.