javascript - Order 组件函数内部出现未定义错误

Question

我开发了一个页面，其中包含一个食谱页面，并且有一个订购按钮。单击订单按钮时​​，该食谱的订单应与食谱部分的价格一起显示。但我得到抱歉食谱不再可用。在订单组件内的渲染部分中，我得到订单的 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))}