이 코드의 유형 오류는 어디에 있습니까?

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 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; 

: 여기

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 파일입니다

해결 방법을 모르겠습니다. 나는 어떤 문서를 살펴 봤지만 내 문제에 대한 답을 확인할 수 없었다. 당신이, 당신이 뭔가를하고있는 비디오를 추가 할 때

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

확인하여 자속 감속기/저장의 논리 :

Answer 1

어, 글쎄 ... 내가 스토어/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을 실행할 수 없습니다, null 또는 정의되지 않은 중 하나입니다 잘못하면 소품이 비어있게됩니다.