未知のタイプエラー：（0、_appStore2.default）は関数ではありません

Question

エクスポートのデフォルトで何か問題があります。私はすべての同様のQ/Aを試しましたが、どこに何が間違っていたかのヒントはまだありません。ブラウザは、私が小道具のエラーを与えるエクスポートのデフォルトをコメントするまで、コードをレンダリングしません。私は、React RouterにhashHistoryを追加しましたが、私は正しいことを確認していません。 githubの上 プロジェクト全体：以下 https://github.com/cichy/react-flux-architecture-es6/blob/master/src/js/components/product/app-catalogdetail.js

コード：SRC/JS /コンポーネント/製品/ディレクトリ内のapp-catlogdetail.js。

import React from "react"; 
import AppStore from '../../stores/app-store'; 
import StoreWatchMixin from '../../stores/app-store'; 
import AppActions from '../../action/app-actions'; 
import CartButton from '../cart/app-cart-button'; 
import { Link } from 'react-router'; 


function getCatalogItem (props) { 
    let item = AppStore.getCatalog().find(({id}) => id === props.params.item) 
    return {item} 
    } 

    const CatalogDetail = (props) => { 
    return (
       <div> 
        <h4>{ props.item.title }</h4> 
        <img src="http://placehold.it/250x250" /> 
        <p>{ props.item.description }</p> 
        <p>{ props.item.cost } <span 
         className="text-success"> 
          {props.item.qty && `(${props.item.qty} in cart)`} 
         </span> 
        </p> 
        <div className="btn-group"> 
        <Link to="/" className="btn btn-default btn-sm">Continue Shopping</Link> 
        <CartButton 
         handler={ 
          AppActions.addItem.bind(null, props.item) 
         } 
         txt="Dodaj do Koszyka" 
         /> 
         </div> 
       </div> 
      ) 
     } 

export default StoreWatchMixin (CatalogDetail, getCatalogItem) 

StoreWatchMixin.js

import React from 'react'; 
import AppStore from '../stores/app-store'; 


export default (InnerComponent, stateCallback) => class extends React.Component { 
    constructor(props){ 
     super(props); 
     this.state = stateCallback(props); 
     this._onChange = this._onChange.bind(this); 
     } 
     componentWillMount(){ 
      AppStore.addChangeListener(this._onChange) 
     } 
     componentWillUnmount(){ 
      AppStore.removeChangeListener(this._onChange) 
     } 

     _onChange(){ 
      this.setState(stateCallback(this.props)) 
     } 
     render(){ 
      return <InnerComponent {...this.state} {...this.props} /> 

     } 
    } 

APP-store.js

import {dispatch, register} from '../dispachers/app-dispatcher'; 
import AppConstants from '../constants/app-constants'; 
import { EventEmitter } from 'events'; 

const CHANGE_EVENT = 'change' 

var _catalog = []; 

for (let i=1; i<9; i++) { 
    _catalog.push({ 
     'id': 'Widget' + i, 
     'title': 'Widget #' + i, 
     'summary': 'wspaniały widget', 
     'description': 'Lorem ipsum dolor sit amet', 
     'cost': i 

    }); 
} 

var _cartItems = []; 

const _removeItem = (item) => { 
    _cartItems.splice(_cartItems.findIndex(i => i === item), 1); 
}; 

const _findCartItem = (item) => { 
    return _cartItems.find(cartItem => cartItem.id === item.id) 
}; 

const _increaseItem = (item) => item.qty++; 

const _decreaseItem = (item) => { 
    item.qty--; 
    if (item.qty === 0) { 
     _removeItem(item) 
    } 
}; 

const _addItem = (item) => { 
    const cartItem = _findCartItem(item); 
    if (!cartItem) { 
     _cartItems.push(Object.assign({qty: 1}, item)); 
    } 
    else { 
     _increaseItem(cartItem); 
    } 
}; 

const _cartTotals = (qty = 0, total = 0) => { 
    _cartItems.forEach(cartItem => { 
     qty += cartItem.qty; 
     total += cartItem.qty * cartItem.cost; 
    }); 
    return {qty, total}; 
}; 

const AppStore = Object.assign(EventEmitter.prototype, { 
    emitChange(){ 
     this.emit(CHANGE_EVENT) 
    }, 

    addChangeListener(callback) { 
     this.on(CHANGE_EVENT, callback) 
    }, 

    removeChangeListener(callback) { 
     this.removeListener(CHANGE_EVENT, callback) 
    }, 

    getCart() { 
     return _cartItems; 
    }, 

    getCatalog() { 
     return _catalog.map(item => { 
      return Object.assign({}, item, _cartItems.find(cItem => cItem.id === item.id)) 
     }) 
    }, 

    getCartTotals() { 
     return _cartTotals(); 
    }, 

    dispatcherIndex: register(function(action) { 
     switch(action.actionType){ 
      case AppConstants.ADD_ITEM: 
       _addItem(action.item); 
       break; 
      case AppConstants.REMOVE_ITEM: 
       _removeItem(action.item); 
       break; 
      case AppConstants.INCREASE_ITEM: 
       _increaseItem(action.item); 
       break; 
      case AppConstants.DECREASE_ITEM: 
       _decreaseItem(action.item); 
       break; 
     } 

     AppStore.emitChange(); 
    }) 
}); 

export default AppStore; 

APP-catalogitem.js

import React from 'react'; 
import AppActions from '../../action/app-actions'; 
import CartButton from '../cart/app-cart-button'; 
import { Link } from 'react-router'; 
import CatalogItem from '../product/app-catalogdetail'; 

    export default (props) => { 
     return (
      <div className="col-xs-6 col-sm-4 col-md-3"> 
       <h4>{ props.item.title }</h4> 
       <img src="http://placehold.it/250x250" width="100%" className="image-responsive"/> 
       <p>{ props.item.summary }</p> 
       <p>{ props.item.cost } <span 
        className="text-success"> 
         {props.item.qty && `(${props.item.qty} in cart)`} 
        </span> 
       </p> 
       <div className="btn-group"> 
       <Link to={ `/item/${props.item.id}` } className="btn btn-default btn-sm">Szczegóły produktu</Link> 
       <CartButton 
        handler={ 
         AppActions.addItem.bind(null, props.item) 
        } 
        txt="Dodaj do Koszyka" 
        /> 
       </div> 
      </div> 
     ) 
    } 

APP-catalog.js

import React from 'react'; 
import AppStore from '../../stores/app-store'; 
import CatalogItem from './app-catalogitem'; 
import StoreWatchMixin from '../../mixins/StoreWatchMixin'; 

function getCatalog(){ 
    return { items: AppStore.getCatalog() } 
} 

const Catalog = (props) => { 
     let items = props.items.map(item => { 
      return <CatalogItem key={ item.id } item={ item } /> 
     }); 
     return(
      <div className="row"> 
       { items } 
      </div> 
     ) 

} 

export default StoreWatchMixin(Catalog, getCatalog); 

ありがとうございます。

Answer 1

ありがとうTJクラウダー。私たちは、（明らかに）を参照する必要が