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

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;

下面是我的store/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

嗯，好吧，我会让你看一下stores/AppStore.js组件，在be...if case部分，我忘了给它们加一个分隔符。一旦我这样做了，就再也不能读取未定义错误的属性'map‘了。我可以添加更多的视频，但我不会得到这个错误。

下面是新的a组件/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或未定义，您不能对null/未定义的值运行.map：

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

检查您的通量减少器/存储上的逻辑当您添加视频时，您正在做一些错误的事情，这将导致道具变为空。