Array.prototype.mapは未定義を返します

Question

配列を<li>要素のコレクションとしてレンダリングしようとしています。私はReact with ES2015構文とBabelを翻訳に使用しています。

配列はオブジェクトに格納され、this.props.technologiesとしてアクセスすることができますので、私はこの書き込み時に：私はしようとすると、

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

しかし：

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

を私は次のHTML出力を取得しますこれは：

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

私はというエラーが出ます：this.props.technologies is undefined

私もこれをやってみました：マップが動作している場合だけチェックする

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

が、それはまだ同じエラーになります。

編集

私はそれをテストしてみました、と私はAJAXを使用してデータをフェッチする場合にのみそれが起こることがわかりました。

私はtest.jsonに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} 

データを提供しています2 編集は次のとおりです。

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

Answer 1

私はついにそれを働かせました。私のコードの問題は、AJAX経由でデータを取得したときにのみ発生したため、関数が最初に呼び出されたときにtechnologiesプロパティが存在しなかった可能性があります。私のために働いた解決策は、コンストラクタ内の状態オブジェクトに空のtechnologies配列を作成することでした。

Detailsクラスのコンストラクタ修正：

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

私はこの質問はhereに答えてきたと考えているが、私は原因Firefoxで別のエラーメッセージにそれを見つけることができませんでした。この回答が似たような状況にある人に役立つことを願っています。

Answer 2

問題はマップとは何の関係もありません。 this.propsには "technologies"というプロパティはありません。テクノロジ配列をthis.propsに割り当てるはずのコードを見てください（私は反応に慣れていません）。