Question

出口默认出了点问题。我尝试了所有类似的问答，但仍然不知道我在哪里做错了。浏览器不会呈现代码，直到我评论导出默认值给我道具错误。我将hashHistory添加到React Router但我不确定我是否正确。 github上的整个项目： https://github.com/cichy/react-flux-architecture-es6/blob/master/src/js/components/product/app-catalogdetail.js

以下代码：src / js / component / product /目录中的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 Crowder。问题是 app-catlogdetail.js 文件中的导入路径不正确应该是

import StoreWatchMixin from '../../mixins/StoreWatchMixin';

无论如何，感谢TJ教我如何提出正确的问题;）

Answer 2

就我而言，问题在于我尝试导入文件的方式

第一次导入是这样的

import * as getDataAction from './YazanAction';

所以我把它改成：

import {getDataAction} from './YazanAction';

它在 ReactNative 中运行良好

未捕获的TypeError：（0，_appStore2.default）不是函数

2 个答案: