null의 'tickets'속성을 읽을 수 없습니다

Question

이 book에서 Redux에 대한 자습서를 수행하고 있습니다. 이 책은 약간의 날짜가 있기 때문에 (0120), Flux을 사용하지만 웹 사이트에서는 부록 6을 무료로 제공하여 장 6을 구현하면 Redux이됩니다. 데모 응용 프로그램으로 두 가지 응용 프로그램이 있습니다. 첫 번째는 가짜 은행이었고 (약간 조정하여) 이제는 두 번째 AirCheap 앱을 실행하고 실행할 수있었습니다. 실행할 수 없었습니다. 이 오류는 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 */ 
)); 

편집 :이 매핑 돌아 오는 상태가 현재 구성 요소 소품에 있기 때문에 그래서 그것을 확인하고 반환 잊지 마세요 map()