ヌルのプロパティ 'チケット'を読み取ることができません

Question

私はこのbookからReduxのチュートリアルに従っています。この本は少し古い（2015年）のため、Fluxを使用していますが、そのWebサイトでは、第6章を実装する無料の付録をReduxで提供しています。デモアプリとして2つのアプリがあります。最初の1つはFake Bankで、これを実行して（ちょっと微調整して）実行できましたが、今度はAirCheapアプリの2番目に実行できませんでした。それは私にこのエラーCannot read property 'tickets' of nullを与える。このように多くのエラーやケースがありますが、それは私には合っていません。私はかなりReactに慣れていますが、私はRedux（実装上の賢明さ）に苦労しているので、このデモでもっと手を汚さないようにしようとしています。

エラーは、チケットは、すべてのデータがないようですが、私はいくつかの操作を行う場合でも、

import React, { Component } from 'react'; 
import { render } from 'react-dom'; 
import { connect } from 'react-redux'; 
import Select from 'react-select'; 
import AirportActionCreators from './actions/AirportActionCreators'; 
import TicketItem from './components/TicketItem'; 
import PropTypes from 'prop-types'; 
import '../App.css'; 

class App extends Component { 

componentDidMount(){ 
    this.props.fetchAirports(); 
} 

componentWillUpdate(nextProps, nextState){ 
let originAndDestinationSelected = nextProps.origin && nextProps.destination; 
let selectionHasChangedSinceLastUpdate = nextProps.origin !== this.props.origin || 
    nextProps.destination !== this.props.destination; 
if (originAndDestinationSelected && selectionHasChangedSinceLastUpdate) 
{ 
    this.props.fetchTickets(nextProps.origin, nextProps.destination); 
} 
} 

render() { 
// Error here 
let ticketList = this.state.tickets.map((ticket)=>(
    <TicketItem key={ticket.id} ticket={ticket} /> 
)); 

return (
    <div> 
    <header> 
     <div className="header-brand"> 
     <img src="logo.png" height="35"/> 
     <p>Check discount ticket prices and pay using your AirCheap points</p> 
     </div> 
     <div className="header-route"> 
     <Select 
      name="origin" 
      value={this.props.origin} 
      options={this.props.airports} 
      onChange={this.props.onChooseAirport.bind(this,'origin')} 
     /> 
     <Select 
      name="destination" 
      value={this.props.destination} 
      options={this.props.airports} 
      onChange={this.props.onChooseAirport.bind(this,'destination')} 
     /> 
     </div> 
    </header> 
    <div> 
     {ticketList} 
    </div> 
    </div> 
); 
} 
} 

App.propTypes = { 
airports: PropTypes.array.isRequired, 
origin: PropTypes.string, 
destination: PropTypes.string, 
tickets: PropTypes.array.isRequired, 
fetchAirports: PropTypes.func.isRequired, 
onChooseAirport: PropTypes.func.isRequired, 
fetchTickets: PropTypes.func.isRequired, 
}; 

const mapStateToProps = (state) => (
{ 
    airports: state.airports 
    .map(airport => ({ 
    value: airport.code, 
    label: `${airport.city} - ${airport.country} (${airport.code})` 
    }) 
), 
origin: state.route.origin, 
destination: state.route.destination, 
tickets: state.tickets 
}); 

const mapDispatchToProps = (dispatch) => (
{ 
fetchAirports:() => dispatch(AirportActionCreators.fetchAirports()), 
onChooseAirport: (target, airport) => dispatch( 
    AirportActionCreators.chooseAirport(target, airport)), 
fetchTickets: (origin, destination) => dispatch(
    AirportActionCreators.fetchTickets(origin, destination)) 
}); 


export default connect(
    mapStateToProps, 
    mapDispatchToProps 
)(App) 

のこのラインApp.js

let ticketList = this.state.tickets.map((ticket)=>(
    <TicketItem key={ticket.id} ticket={ticket} /> 
)); 

App.jsから来ていますチェックのように

if (this.state.tickets.length>0) 

等を行います。私はまだ同じエラーを取得し

let ticketList = this.state.tickets && this.state.tickets.map((ticket)=>(
<TicketItem key={ticket.id} ticket={ticket} /> 
)); 

。

私は、apiがデータを取得する必要があるかもしれないが、本からその指示を出さなかった可能性があると考えます。

Answer 1

ticketsをstateと設定していないようです。

mapStateToPropsでticketsをpropsと定義しています。

let ticketList = this.props.tickets && this.props.tickets.map((ticket)=>(
return (<TicketItem key={ticket.id} ticket={ticket} />) /* dont forget return */ 
)); 

編集を：それはマッピングReduxの状態は、現在のコンポーネントの小道具にだからので、それをチェックアウトして、返し忘れてはいけないmap()