where is the Type error in this code?

Question

I am developing in Reactjs utilizing the Flux architecture. When I add a video is when I get the error, but when I refresh the page, the video does show up. So I am getting this error in my console:

Uncaught TypeError: Cannot read property 'map' of undefined

And I believe the error may lie somewhere in this file components/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;

But you may also need to look at this file at components/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;

Here is my stores/AppStore.js file:

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;

I am not sure how to resolve this. I have looked through some documentation, but I could not identify the answer to my problem.

Answer 1

Huh, well I'll be...if you look at the stores/AppStore.js component, in the switch case section, I forgot to add a break to them. Once I did that, no more cannot read property 'map' of undefined error. I can add more videos and I do not get that error.

Here is the new a components/AppStore.js file:

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;