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)

This is what I get from the console.logs。

我希望event.tickets[]可以像其他属性一样被访问，但是会出现此错误。

Answer 1

您console.log this.props.tickets，但随后您映射到this.props.event.tickets

React Redux无法显示作为对象属性的数组。我究竟做错了什么？

1 个答案: