Javascript 访问react中状态变量的属性并将其用于比较

嗨，我是全新的反应。在我的应用程序中，我有两个状态变量，“disks”（一个包含各种盘的详细信息的对象，如“id”、“name”等）和“selectedDish”（一个数值）。当用户点击菜单中的一道菜（由“菜单”组件呈现）时，selectedDish变量将更新为所选菜的id（我已检查该操作是否有效）。 现在我想通过这样做来选择菜

dish={this.state.dish.filter（（dish）=>{return dish.id===this.state.selectedDish}）[0]}

然后将其作为道具传递给另一个组件（DishDetail）

我的问题是，我似乎无法用上述方法选择一道菜。（我从DishDetail组件中得到错误“this.props.dish”未定义）。我做错什么了吗

类主扩展组件{
建造师（道具）{
超级（道具）；
此.state={
菜：菜，
selectedDish:null
};
}
onDishSelect（dishId）{
this.setState（{selectedDish:dishId}）
}
render（）{
返回(
{
this.onDishSelect（dishId）}/>
{ 
return dish.id==this.state.selectedDish
})[0]} />
);
}
}
导出默认主您遇到的问题是因为初始状态为null

i、 e
selectedDish:null

在DishDetails组件中添加一个复选框，使其在dish prop不为null之前不进行渲染

render(){
        const { dish } = this.props;
        
        if (!dish) {
           return null;
        }
        
        return (
            <div className="col-12 col-md-5 m1">
                <Card>
                    <CardImg width="100%" src = {this.props.dish.image} alt = {this.props.dish.name}/>

                    <CardBody>
                            <CardTitle>{this.props.dish.name}</CardTitle>
                            <CardText>{this.props.dish.description}</CardText>
                    </CardBody>

                </Card>
            </div>
        )
    }

render（）{
const{dish}=this.props；
如果（！盘）{
返回null；
}
返回(
{this.props.dish.name}
{this.props.dish.description}
)
}
嗯，您必须显示为DishDetail组件的代码，不是吗。您可以在菜单组件中为每个菜肴使用DishDetail组件。如果你这样做了，你就不必担心所有这些了。谢谢你确定这样不行吗。这对我来说非常好。这就是我所想的，但你能解释一下为什么即使在没有定义菜肴的情况下，这似乎也能起作用吗。React不应该呈现任何内容当您呈现未定义的变量时，它不会呈现任何内容，但是当您尝试从未定义的变量访问属性时，它不会从未定义的变量中找到其键并抛出错误。谢谢！！！！！！我一直在为这件事发愁，几乎熬了整整一个晚上想弄明白。