где ошибка типа в этом коде?

Question

Я развиваюсь в Reactjs, используя архитектуру Flux. Когда я добавляю видео, я получаю сообщение об ошибке, но когда я обновляю страницу, видео появляется. Таким образом, я получаю эту ошибку в моей консоли:

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; 

Я не уверен, как это решить. Я просмотрел документацию, но не смог определить ответ на мою проблему.

Answer 1

Да, я буду ... если вы посмотрите на компоненты store/AppStore.js, в разделе case switch, я забыл добавить к ним перерыв. Как только я это сделал, больше не могу прочитать свойство «карта» неопределенной ошибки. Я могу добавить больше видео, и я не получаю эту ошибку.

Вот новый компоненты/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 проп либо нулевой или неопределенный, вы не можете запустить .map на нуле/неопределенное значение:

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

Проверьте логику на вашем флюс редуктора/магазине, когда вы добавляете видео, вы делаете что-то неправильно, и это приводит к тому, что реквизит становится пустым.