订单组件

Question

我开发了一个包含单个食谱页面的页面，并且有一个订单按钮。单击订单按钮时​​，该配方的订单应与配方部分的价格一起显示。但我得到抱歉的食谱不再可用。在Order Component中的render部分，我得到一个订单ID。但是为什么我在renderOrder函数中得到一个未定义的错误（this.props.order [key]和this.props.recipe [key]）。为什么会这样？

export default class SingleRecipe extends Component {
    constructor(){
        super();
        this.state = { order: {} };
    }

    getMeteorData(){
        let data = {};
        let recipehandle = Meteor.subscribe('singlerecipe',this.props.slug);
        if(recipehandle.ready()){
            data.recipe = Recipes.findOne({_id:this.props.slug});
        }
        return data;
    }


    addToOrder(key){
        this.state.order[key] = this.state.order[key]+1 || 1;;
        this.setState({
            order:this.state.order
        });
    }

    render() {
        const {recipe}=this.data;
        const {order}=this.state;
        return (
            <div className="container">
                <div className="row">
                    <div className="col s6">
                        {recipe.nameOfRecipe}
                    </div>
                    <div className="col s6">
                        <Order order={order} recipe={recipe} removeFromOrder = {this.removeFromOrder} /> 
                    </div>
                </div>
            </div>
        );
    }
}


export default class Order extends Component {
    renderOrder(key){
        let order = this.props.order[key]; 
        let recipe = this.props.recipe[key]; // get undefined
        let removeButton = <button onClick={this.props.removeFromOrder.bind(this,key)}>&times;</button>;
        if(!recipe){
            return  <li key={key}>Sorry, recipe no longer available! {removeButton}</li>
        }

        return(
                <li key={key}>
                    <span>
                         <CSSTransitionGroup component="span" transitionName="count" transitionLeaveTimeout={250} transitionEnterTimeout={250} className="count">
                            <span key={count}>{count}</span>
                         </CSSTransitionGroup>
                         {recipe.nameOfRecipe}{removeButton}
                    </span>
                </li>
            )       
    }
    render() {
        let orderId = Object.keys(this.props.order); // returns the id 
        return (
            <div className="order-wrap">
                <h2 className="order-title">Your Order</h2>
                <CSSTransitionGroup
                      className="order"
                      component="ul"
                      transitionName="order"
                      transitionEnterTimeout={100}
                      transitionLeaveTimeout={500}
                    >
                   {orderId.map(item=>this.renderOrder(item))}
                </CSSTransitionGroup>

            </div>
        );
    }
}

Answer 1

{orderId.map(this.renderOrder)}  

更改为

 {orderId.map(item=>this.renderOrder(item))}

Answer 2

更改this.props.recipe[key] to this.props.recipe将有效。