Array.prototype.map возвращает undefined

Question

Я пытаюсь отобразить массив как набор элементов <li>. Я использую React с синтаксисом ES2015 и Babel для перевода.

Массив хранится в объекте и могут быть доступны как this.props.technologies, поэтому, когда я пишу это:

<ul className="categories"> 
    { this.props.technologies } 
</ul> 

Я получаю следующий HTML вывод:

<ul class="categories" is="null"> 
    coffeescript 
    atom 
</ul> 

Но, когда я пытаюсь это:

<ul className="categories"> 
{ 
    this.props.technologies.map(c => { 
    return `<li>${c}</li>` 
    }) 
} 

Я получаю сообщение об ошибке сказав: this.props.technologies is undefined

Я даже пытался это сделать:

this.props.technologies.map(c => c) 

просто проверить, если карта работает, но он по-прежнему приводит к одной и той же ошибки.

Редактировать

Я попытался тестирования, и обнаружили, что это происходит только тогда, когда я получать данные с помощью AJAX.

Edit 2 Я обеспечивая MVCE

import React, {Component} from 'react' 
import axios from 'axios' 

class Header extends Component { 

    constructor(props) { 
    super(props) 
    this.state = {} 
    } 

    render() { 
    return(
     <ul> 
     { 
     this.props.technologies.map(c => <li>{c}</li>) 
     } 
     </ul> 
    ) 
    } 
} 

class Details extends Component { 

    constructor(props) { 
    super(props) 
    this.state={} 
    } 

    componentWillMount(){ 
    axios.get(`/static/dummydata/test.json`) 
     .then(res => this.setState(res.data)) 
     .catch(res=>console.log(res)) 
    } 

    render(){ 
    return(
     <Header technologies={this.state.technologies}/> 
    ) 
    } 
} 

export {Header, Details} 

Данные в test.json является:

{ 
    "technologies": [ 
    "coffeescript", 
    "js" 
    ] 
} 

Answer 1

Я, наконец, получил его на работу. Проблема в моем коде произошла только тогда, когда я извлек данные через AJAX, так что могло случиться, что свойство technologies не существовало, когда функция была впервые вызвана. Решение, которое сработало для меня, состояло в создании пустого массива technologies в объекте state в конструкторе.

Модифицированный конструктор Details класса:

constructor(props) { 
    super(props) 
    this.state={ 
    "technologies": [] 
    } 
} 

Я считаю, что этот вопрос был дан ответ here, но я не смог найти его в связи с другим сообщением об ошибке в Firefox. Надеюсь, этот ответ поможет кому-то в подобной ситуации.

Answer 2

проблема не имеет ничего общего с картой. this.props не обладает свойствами «технологий». Посмотрите, какой код должен назначать массиву технологий this.props (я не знаю, как реагировать).