在反应中访问状态变量的属性并使用它进行比较

Question

嗨，我是全新的反应。在我的应用程序中，我有两个状态变量，“dishes”（一个包含各种菜肴细节的对象，例如“id”、“name”等）和“selectedDish”（一个数值）。当用户点击菜单中的一道菜（由“菜单”组件呈现）时， selectedDish 变量会更新为所选菜的 id（我已经检查过它是否有效）。 现在我想通过做来选择这道菜 dish={this.state.dishes.filter((dish)=>{return dish.id===this.state.selectedDish})[0]} 然后将其作为道具传递给另一个组件（DishDetail）。

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

class Main extends Component {

constructor(props) {
  super(props);

  this.state = {
    dishes: DISHES,
    selectedDish: null
  };
}


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


  render(){

    
  

    return (
      <div>
          <div className="container">
            <div className="row">
                <Menu dishes={this.state.dishes}   onClick={(dishId)=>{
                    this.onDishSelect(dishId)}}/>
                <DishDetail dish={this.state.dishes.filter((dish)=>
                    { 
                        return dish.id===this.state.selectedDish
                    })[0]} />
            </div>
          </div>
      
      </div>
    );
  }
}

export default Main;

DishDetail 组件

import React, { Component } from 'react'
import { Card, CardImg, CardImgOverlay, CardBody, CardText, CardTitle } from 'reactstrap';


class DishDetail extends Component {

    
    constructor(props){
        super(props);

        this.state ={
        }
    }



    render(){


        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>

        )


    }


}

export default DishDetail;

Answer 1

您遇到的问题是因为初始状态为空

即selectedDish: null

在您的 DishDetails 组件中添加一个检查，以便在菜道具不为空之前不渲染。

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