React Redux не может отобразить массив, который является свойством объекта. Что я делаю неправильно?

Question

Я пытаюсь отобразить объект, который передается как реквизит.Одним из свойств объекта является массив.Массив виден в хранилище Redux, виден на console.log, виден в инструментах React, но когда я пытаюсь отобразить его и отобразить в виде списка, я получаю TypeError: Cannot read property 'map' of undefined.Что я делаю не так?

Я пытался передать массив заявок в качестве отдельной подпорки, но все равно получаю ту же ошибку.И все остальные свойства this.props.event доступны.

Это мой компонент рендеринга:

    render(){
        return(

            <div>
                {console.log('New EventDetails props event ', this.props.event)}
                {console.log('New EventDetails props tickets ', this.props.tickets)}


                <h1>Event name: {this.props.event.name}</h1>
                <i>{this.props.event.id}</i>
                <p>Event description: {this.props.event.description}</p>
                <ul><h3>Tickets</h3>
                    {this.props.event.tickets.map(ticket =>{
                        return <Link to={`${this.props.event.id}/tickets/${ticket.id}`}><li key={ticket.id}><p>Price: {ticket.price}</p>
                                   <p>Description: {ticket.description}</p>     
                                </li> </Link>
                    })}

                </ul>

            </div>

        )
    }

}

Это редуктор:

import {DISPLAY_EVENT} from '../actions/events'

const eventReducer = (state={}, action) => {
    console.log("single event reducer test, actin.payload: ", action.payload) //shows correct payload

    switch(action.type) {
        case DISPLAY_EVENT:
        return action.payload

        default:
        return state
    }
}

Япередача реквизита из другого компонента:

import React from 'react'
import {connect} from 'react-redux'
import EventDetails from './EventDetails'
import {getEvent} from '../actions/events'



class EventDetailsContainer extends React.Component {
    componentDidMount() {
        console.log("Component Did Mount test");
        console.log('EventDetailsContainer props:', this.props);      
        this.props.getEvent(Number(this.props.match.params.id))
      }

      render() {  

        return (
            <div>
                <EventDetails event={this.props.event} tickets={this.props.tickets}/>
            </div>
        )
      }  

}

const mapStateToProps = state => {   
  return {
    event: state.event,
    tickets:state.event.tickets    
  }
}

export default connect(mapStateToProps, {getEvent})(EventDetailsContainer)

Это то, что я получаю из console.logs .

Я ожидал, что event.tickets[] будет доступен толькокак другие свойства, но вместо этого выдает эту ошибку.

Answer 1

вы console.log this.props.tickets, но затем вы отображаете более this.props.event.tickets