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道具是空的或未定义的，您无法在空/未定义的值上运行.map：

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

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

Answer 2

嗯，好吧，我会...如果你看看商店/ AppStore.js组件，在switch case部分，我忘了给他们添加一个休息时间。一旦我这样做，就再也无法读取未定义错误的属性“map”。我可以添加更多视频，但我没有收到错误。

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

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

2 个答案: