このコードのTypeエラーはどこですか？

Question

私はFluxアーキテクチャを利用したReactjsで開発中です。ビデオを追加するとエラーが発生しますが、ページを更新するとビデオが表示されます。

Uncaught TypeError: Cannot read property 'map' of undefined 

そして、私はエラーがこのファイルコンポーネント/ App.jsのどこかにあるのかもしれないと考えている：だから、私は、コンソールでこのエラーを取得しています

var React = require('react'); 
var AppActions = require('../actions/AppActions'); 
var AppStore = require('../stores/AppStore'); 
var AddForm = require('./AddForm'); 
var VideoList = require('./VideoList'); 

function getAppState(){ 
    return { 
    videos: AppStore.getVideos() 
    } 
} 

var App = React.createClass({ 
    getInitialState: function(){ 
    return getAppState(); 
    }, 

    componentDidMount: function(){ 
    AppStore.addChangeListener(this._onChange); 
    }, 

    componentUnmount: function(){ 
    AppStore.removeChangeListener(this._onChange); 
    }, 

    render: function(){ 
    console.log(this.state.videos); 
    return (
     <div> 
     <AddForm /> 
     <VideoList videos = {this.state.videos} /> 
     </div> 
    ) 
    }, 

    // Update view state when change is received 
    _onChange: function(){ 
    this.setState(getAppState()); 
    } 
}); 

module.exports = App; 

しかし、あなたもこれを見てする必要があるかもしれませんコンポーネント/ VideoList.jsでファイル：

var React = require('react'); 
var AppActions = require('../actions/AppActions'); 
var AppStore = require('../stores/AppStore'); 
var Video = require('./Video'); 


var VideoList = React.createClass({ 
    render: function(){ 
    return (
     <div className="row"> 
     { 
      this.props.videos.map(function(video, index){ 
      return (
       <Video video={video} key={index} /> 
      ) 
      }) 
     } 
     </div> 
    ); 
    } 
}); 

module.exports = VideoList; 

ここでは私の店である/ AppStore.jsファイル：

var AppDispatcher = require('../dispatchers/AppDispatcher'); 
var AppConstants = require('../constants/AppConstants'); 
var EventEmitter = require('events').EventEmitter; 
var assign = require('object-assign'); 
var AppAPI = require('../utils/AppAPI'); 

var CHANGE_EVENT = 'change'; 

var _videos = []; 

var AppStore = assign({}, EventEmitter.prototype, { 
    saveVideo: function(video){ 
    _videos.push(video); 
    }, 
    getVideos: function(){ 
    return _videos; 
    }, 
    setVideos: function(videos){ 
    _videos = videos; 
    }, 
    emitChange: function(){ 
    this.emit(CHANGE_EVENT); 
    }, 
    addChangeListener: function(callback){ 
    this.on('change', callback); 
    }, 
    removeChangeListener: function(){ 
    this.removeListener('change', callback); 
    } 
}); 

AppDispatcher.register(function(payload){ 
    var action = payload.action; 

    switch (action.actionType) { 
    case AppConstants.SAVE_VIDEO: 
     console.log('Saving Video...'); 

     // Store SAVE 
     AppStore.saveVideo(action.video); 

     // API SAVE 
     AppAPI.saveVideo(action.video); 

     // Emit change 
     AppStore.emit(CHANGE_EVENT); 

    case AppConstants.RECEIVE_VIDEOS: 
     console.log('Saving Video...'); 

     // Set Videos 
     AppStore.setVideos(action.videos); 

     // Emit change 
     AppStore.emit(CHANGE_EVENT); 
    } 

    return true; 
}); 

module.exports = AppStore; 

これを解決する方法がわかりません。私はいくつかの文書を見てきましたが、私は自分の問題に対する答えを特定できませんでした。あなたは、あなたが何かをやっているビデオを追加するとき

this.props.videos.map(function(video, index){ 

チェックあなたのフラックス減速/ストアのロジック：

Answer 1

ええ、まあいいよ...店舗/ AppStore.jsコンポーネントを見ると、スイッチケースのセクションで、休憩を追加するのを忘れてしまった。私がそれをしたら、未定義のエラーのプロパティ 'マップ'を読み取ることができなくなりました。私はさらにビデオを追加することができ、私はそのエラーを取得しません。ここで

は新しいコンポーネント/ AppStore.jsファイルです：

var AppDispatcher = require('../dispatchers/AppDispatcher'); 
var AppConstants = require('../constants/AppConstants'); 
var EventEmitter = require('events').EventEmitter; 
var assign = require('object-assign'); 
var AppAPI = require('../utils/AppAPI'); 

var CHANGE_EVENT = 'change'; 

var _videos = []; 

var AppStore = assign({}, EventEmitter.prototype, { 
    saveVideo: function(video){ 
    _videos.push(video); 
    }, 
    getVideos: function(){ 
    return _videos; 
    }, 
    setVideos: function(videos){ 
    _videos = videos; 
    }, 
    removeVideo: function(videoId){ 
    var index = _videos.findIndex(x => x.id === videoId); 
    _videos.splice(index, 1); 
    }, 
    emitChange: function(){ 
    this.emit(CHANGE_EVENT); 
    }, 
    addChangeListener: function(callback){ 
    this.on('change', callback); 
    }, 
    removeChangeListener: function(){ 
    this.removeListener('change', callback); 
    } 
}); 

AppDispatcher.register(function(payload){ 
    var action = payload.action; 

    switch (action.actionType) { 
    case AppConstants.SAVE_VIDEO: 
     console.log('Saving Video...'); 

     // Store SAVE 
     AppStore.saveVideo(action.video); 

     // API SAVE 
     AppAPI.saveVideo(action.video); 

     // Emit change 
     AppStore.emit(CHANGE_EVENT); 
     break; 

    case AppConstants.RECEIVE_VIDEOS: 
     console.log('Receiving Video...'); 

     // Set Videos 
     AppStore.setVideos(action.videos); 

     // Emit change 
     AppStore.emit(CHANGE_EVENT); 
     break; 

    case AppConstants.REMOVE_VIDEO: 
     console.log('Removing Video...'); 

     // Store Remove 
     AppStore.removeVideo(action.videoId); 

     // API remove 
     AppAPI.removeVideo(action.videoId); 

     // Emit change 
     AppStore.emit(CHANGE_EVENT); 
     break; 
    } 

    return true; 
}); 

module.exports = AppStore; 

Answer 2

あなたvideos小道具は、あなたがnull /未定義の値に.mapを実行することはできません、nullまたは未定義のいずれかであります間違っていると小道具が空になってしまっている。