reactjsのToDoリスト - キャッチされない例外TypeErrorは：未定義

Question

私は基本的なToDoリスト用ReactJSチュートリアル（http://redux.js.org/docs/basics/UsageWithReact.html）を以下、私の好みに合わせて微調整が、次のエラーに実行していますよのプロパティ「マップ」を読み込めません：

ここで

Uncaught TypeError: Cannot read property 'map' of undefined 

は、コードは次のとおりです。

ConfigList.js -

import React, {Component, PropTypes} from 'react'; 
import ConfigItem from '../components/ConfigItem'; 


const ConfigList = ({ configs }) => (
    <ul> 
    {configs.map(config => 
     <ConfigItem 
     key={config.id} 
     /> 
    )} 
    </ul> 
); 

ConfigList.propTypes = { 
    configs: PropTypes.arrayOf(PropTypes.shape({ 
    id: PropTypes.number.isRequired, 
    text: PropTypes.string.isRequired 
    })) 
}; 

export default ConfigList; 

ConfigItem.js -

import React, { PropTypes } from 'react'; 

const ConfigItem = ({ text }) => (
    <li>{text}</li> 
); 

ConfigItem.propTypes = { 
    text: PropTypes.string.isRequired 
}; 

export default ConfigItem; 

私はReactJSを新しく、Javascriptをやや新しくしました。なぜこのエラーが表示されているのかと、それを回避するために何ができるかについてのフィードバックを得ることを望んでいます。

Answer 1

エラーCannot read property 'map' of undefinedは、存在しないものにmap()を呼び出そうとしています。あなたがmap()を呼び出している唯一の場所はConfigListである：

{configs.map(config => 
    <ConfigItem 
    key={config.id} 
    /> 
)} 

あなたがmap()を呼び出すようにしようとしているときconfigs変数が設定されていないことを示唆しています。 ConfigListはfunctional React componentなのでpropsオブジェクトの一部としてconfigsが渡されると予想されますが、設定されているようには見えません。

を呼び出すコードを確認して、configsを設定していることを確認する必要があります。それは少しのように見えるはずです

<ConfigList configs={ myConfigs } />