TypeError：無法讀取 React 中未定義的屬性“注釋”

Question

我創建了一個主要組件，我從中使用組件的 rest。 對於一個組件，我通過 onClick 傳遞適當的道具。 即使該屬性已正確定義並傳遞，我似乎也會收到此錯誤。 以下是片段： 1.主要組件

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]} 

在菜單組件中：

<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>

在菜式細節組件中：

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>);
        }
    }
}

首先，我認為，在 maincomponent 的 state 中，selecteddish 一開始就設置為 null，這就是發生錯誤的原因。 但是即使我如上所述添加 null 檢查，錯誤仍然存在。 我哪里錯了？

Answer 1

在 DishDetail 組件中， dish最終接收到一個值。 您正在檢查，但在不正確的地方。

因此，在您的渲染中，首先檢查this.props.dish 。

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>);
    }
}
}