26813


Reactjsで画像のBase64表現をサーバから取得し表示するコンポーネントを作成しています。コードは以下のとおりです。

**DataImage.react.js**

[code]

    import React, { Component } from 'react';
    import DataImageStore from '../../stores/DataImageStore';
    import DataImageActions from '../../actions/DataImageActions';
    
    export class DataImage extends Component{
      static propTypes = {
        path: React.PropTypes.string.isRequired
      }
    
      constructor(props){
        super(props);
        this.state = this.getDataImageState();
        this.onStateChanged = this.onStateChanged.bind(this);
      }
    
      componentWillMount(){
        DataImageActions.fetchImage(this.props.path);
      }
    
      componentDidMount(){
        DataImageStore.addChangeListener(this.onStateChanged);
      }
    
      componentDidUnMount(){
        DataImageStore.removeListener(this.onStateChanged);
      }
    
      getDataImageState(){
        return {
          image: DataImageStore.getImage()
        }
      }
    
      onStateChanged(){
        this.setState(this.getDataImageState());
      }
    
      render(){
        return <img src={this.state.image}/>
      }
    }
    
[/code]

**DataImageStore.js**

[code]

    import AppDispatcher from '../dispatcher/AppDispatcher';
    import { EventEmitter } from 'events';
    import DataImageConstants from '../constants/DataImageConstants';
    
    class DataImageStore extends EventEmitter {
      constructor(){
        super();
        AppDispatcher.register(this.onAction.bind(this));
        this.CHANGE_EVENT = 'change';
        this.image = "";
      }
    
      onAction(action){
        switch(action.actionType){
          case DataImageConstants.DATA_IMAGE_RECEIVED:
            this.image = action.image;
            this.emitChange();
            break;
          default:
        }
      }
    
      getImage(){
        return this.image;
      }
    
      emitChange(){
        this.emit(this.CHANGE_EVENT);
      }
    
      addChangeListener(callback){
        this.on(this.CHANGE_EVENT, callback);
      }
    
      removeListener(callback){
        this.removeChangeListener(this.CHANGE_EVENT, callback);
      }
    }
    
    let store = new DataImageStore();
    export default store;
    
[/code]

**DataImageActions.js**

[code]

    import AppDispatcher from '../dispatcher/AppDispatcher';
    import DataImageConstants from '../constants/DataImageConstants';
    import DataImageUtils from '../utils/DataImageUtils';
    
    export default {
      fetchImage: (path) => {
        AppDispatcher.dispatch({
          actionType: DataImageConstants.DATA_IMAGE_FETCH
        });
        DataImageUtils.fetch(path);
      },
    
      receiveImage: (image) => {
        AppDispatcher.dispatch({
          actionType: DataImageConstants.DATA_IMAGE_RECEIVED,
          image: image
        });
      }
    }
    
[/code]

**DataImageConstants.js**

[code]

    import keyMirror from 'keymirror';
    
    export default keyMirror({
      DATA_IMAGE_FETCH: null,
      DATA_IMAGE_RECEIVED: null
    });
    
[/code]

**DataImageUtils.js**

[code]

    import request from 'superagent';
    import DataImageActions from '../actions/DataImageActions';
    
    export default {
      fetch: (path) => {
        request
          .get('/image/')
          .query({
            path: path
          })
        .end((err, res) => {
          if(err) return console.error(err);
          DataImageActions.receiveImage(res.text);
        });
      }
    }
    
[/code]

しかし、このクラスの親コンポーネントでpathを取得しViewを更新するとタイトルのようなエラーが出ます。どのように修正すれば上のエラーを解決できるのでしょうか。教えて下さい。よろしくお願いします。


CC BY-SA 3.0
2016-06-16T23:44:32.587
26803
2016-06-17T07:20:12.307
7232
question
javascript reactjs
Error: Invariant Violation: Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch.(…)

[code]

    import React, { Component } from 'react';
    import request from 'superagent';
    
    export class DataImage extends Component{
      static propTypes = {
        path: React.PropTypes.string.isRequired
      }
    
      constructor(props){
        super(props);
        this.state = {
          image: ""
        }
      }
    
      componentDidMount(){
        request
          .get('/image/')
          .query({
            path: this.props.path
          })
        .end((err, res) => {
          if(err) return console.error(err);
          this.setState({
            image: res.text
          });
        });
      }
    
      render(){
        return <img src={this.state.image}/>
      }
    }
    
[/code]


CC BY-SA 3.0
2016-06-17T07:20:12.307
26813
2016-06-17T07:20:12.307
7232
26803
answer