Как исправить «TypeError: Невозможно прочитать свойство« длина »неопределенного» во время рендеринга компонента React

Question

Я пытаюсь получить и отобразить данные из API. В методе рендеринга моего компонента Ticket я получил следующую ошибку (см. Метод рендеринга): TypeError: Невозможно прочитать свойство 'length' из undefined. Этот код работал с очень похожим примером, представленным в книге, но он не работает с моими данными (API в порядке)

const CITY_API = 'http://api.travelpayouts.com/data/ru/cities.json',                  
        PROXY = 'https://cors-anywhere.herokuapp.com/'; 

const getTickets = (url) => new Promise((resolves, rejects) => {
const request = new XMLHttpRequest();
request.open('GET', url);
request.onload = () => (request.status === 200) ? 
    resolves(JSON.parse(request.response).results) :
    rejects(Error(request.statusText))
request.onerror = err => rejects(err)
request.send()
})

const Ticket = ({code}) => 
  <div>
    <p>{code}</p>
  </div>



class TicketList extends Component {
constructor() {
    super()
    this.state = {
        tickets: [],
        loading: false,
        error: null
    }
}

componentWillMount() {
    this.setState({loading: true});
    getTickets(PROXY + CITY_API)
        .then(tickets => {
            this.setState({tickets, loading: false});                            
        },
        error => {
            this.setState({error, loading: false});
        }
    )
}

componentWillUpdate() {
  console.log('updated');
}

render() {
    const  { tickets, loading, error } = this.state;
    return (
        <div>
            {(loading) ?
                <span>Loading Tickets</span> :                
                (tickets.length) ?  //the line I'm getting the error
                    tickets.map((ticket, i) =>
                        <Ticket key={i} code={ticket.code} />
                    ) :
                    <span>No tickets is loaded...</span>                                              
        }
        {(error) ? <p>Error</p> : ""}
        </div>
    ) 
  }
}

Answer 1

Это не должно вызывать эту ошибку, так как вы устанавливаете начальное состояние как пустой список, НО, попробуйте это:

(tickets && tickets.length) ? ...