此代码中的类型错误在哪里？

Question

我正在利用 Flux 架构在 Reactjs 中进行开发。当我添加视频时，我得到了错误，但是当我刷新页面时，视频确实出现了。所以我在控制台中收到了这个错误：

Uncaught TypeError: Cannot read property 'map' of undefined

而且我相信错误可能出在这个文件 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;

但您可能还需要在 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;

这是我的商店/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

您的 videos 属性为 null 或未定义，您不能在 null/未定义值上运行 .map：

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

当你添加视频时检查你的通量减少器/商店的逻辑，你做错了什么，导致道具变空。

Answer 2

嗯，我会...如果您查看stores/AppStore.js 组件，在switch case 部分中，我忘记为它们添加中断。一旦我这样做了，就再也无法读取未定义错误的属性“地图”了。我可以添加更多视频，但我没有收到该错误。

这是新的组件/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;