TypeError：无法读取 React 中未定义的属性“注释”

Question

I have created a Main Component from which I am making use of the rest of the components. For a component, I am passing in appropriate props through onClick. Even though the property is correctly defined and passed on, I seem to get this error. Here are the snippets: 1.Main Component

import Menu from './MenuComponent'; 
import DishDetail from './DishDetailComponent';
import { DISHES } from '../shared/dishes';


    onDishSelect(dishId) {
        this.setState({
            selectedDish: dishId
        });
    }

// In render:

<Menu dishes={this.state.dishes} onClick={(dishId) => { this.onDishSelect(dishId) }} />
                <DishDetail dish={this.state.dishes.filter((dish) => dish.id === this.state.selectedDish)[0]} 

In the menucomponent:

<div key={dish.id} className="col-12 col-md-5 mt-2">
                    <Card key={dish.id}
                        onClick={() => this.props.onClick(dish.id)}>
                        <CardImg width="100%" src={dish.image} alt={dish.name} />
</div>

In the dishdetail component:

render() {  
        const dish = this.props.dish;
        const dishdetail = this.renderDish(dish);
        const dishcomments = this.renderComments(dish.comments);
        if (dish != null) {
            return (
                <div className="row">
                    {dishdetail}
                    {dishcomments}
                </div>
            );
        }
        else {
            return (<div></div>);
        }
    }
}

First I thought, the selecteddish is set to null in state of maincomponent at the beginning and that's why the error is occuring. But then even if I add the null check as above, the error still persists. Where am I getting wrong?

Answer 1

In DishDetail component, the dish receives a value a bit eventually. You are making checks but at incorrect place.

So, in your render, make checks on this.props.dish in the beginning.

render() {  
    if (this.props.dish) {
        const dish = this.props.dish;
        const dishdetail = this.renderDish(dish);
        const dishcomments = this.renderComments(dish.comments);
        return (
            <div className="row">
                {dishdetail}
                {dishcomments}
            </div>
        );
    }
    else {
        return (<div></div>);
    }
}
}