无法使用道具将菜式传递给组件

Question

我正在开发应用程序中的展示盘（存储在数组中），并且用户单击其中一个盘，将用户带到DishDetail，每个DishDetail都具有关联的注释，该注释也需要显示。我可以显示DishDetail，但我正在努力传递和显示评论，这给了我“ TypeError：无法读取未定义的属性'comments'”任何人都可以帮助我了解我出了什么问题。我已经附上了所有必需的文件。预先谢谢你

MenuComponent.js

import React from 'react';
import { Media } from 'reactstrap' ;
import { Card, CardImg, CardImgOverlay, CardText, CardBody,CardTitle } from 'reactstrap';
//import Dishdetail from './DishdetailComponent' ;

   //One way of implementign functional component
   function RenderMenuItem({dish, onClick }) {
        return (
            <Card  onClick={() => onClick(dish.id)}>
               <CardImg width="100%" src={dish.image} alt={dish.name} />
               <CardImgOverlay>
                    <CardTitle>{dish.name}</CardTitle>
                </CardImgOverlay>
            </Card>


        )
    }     
    //Another way of implementing functional component
    const Menu = (props) => {
         // using props keyword we can use to map the array
         const menu = props.dishes.map((dish) => {
            return (
                 <div key={dish.id} className="col-12 col-md-5 m-1">
                    <RenderMenuItem dish={dish} onClick={props.onClick} />
                 </div>
            )

        })

        return (
          <div className="container">
              <div className="row">       
                    {menu}
              </div>  

              <div className="row">       

              </div>  
          </div>
        )

    }

export default Menu;

DishDetail.js

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

    //WE PASSED AN ARRAY CALLED 'dish' form MainComponent.js

    //============== RENDER DISH =====================
    function RenderDish({dish}) {     
        // make sure the selected dish is an existing dish
        if(dish != null) {
              return (
                <div>  
                  <Card>
                       <CardImg width="100%" src={dish.image} alt={dish.name} />
                       <CardBody>
                          <CardTitle>{dish.name}</CardTitle>
                          <CardText>{dish.description}</CardText>                  
                       </CardBody>
                  </Card>
                </div>
              )
        }
        else {
            return (
              <div></div>
            );
        }
    }
    //============== RENDER COMMENT =====================
   function RenderComments({comments}) {
        //Get the comments array using props keyword    
        if (comments != null){
            const comms = comments.map((comm) => {
                //format the date as "Sep 06, 2014"
                let date = new Intl.DateTimeFormat('en-US', {
                    year:'numeric',
                    month: 'short',
                    day: '2-digit'
                }).format(new Date(Date.parse(comm.date)))

                return (
                        <ul key={comm.id} className="list-unstyled">
                            <li className="comment">{comm.comment}</li>
                            <li className="author">-- {comm.author}, {date}</li>
                        </ul>          
                    );
                })

            return (         
                <div className="container">
                    <div className="row">  
                        <h4>Comments</h4>
                          <div>{comms}</div>  
                    </div>
                </div>

            );
        }
        else {
            return(
                <div></div>
            )
        }


    }

   //============== RENDER DISH and COMMENT ASSOCIATED =====================

    const DishDetail = (props) => {
        return (
            <div className="container">
              <div className="row">
                   <div className="col-12 col-md-5 m-1">       
                      <RenderDish dish={props.dish}/>                      
                   </div> 
                   <div className="col-12 col-md-5 m-1">                    
                        // HERE IS WHERE I HAVE A PROBLEM!!!!         
                        <RenderComments comments={props.dish.comments}/>
                   </div>           
              </div>
            </div> 

        )

    }

export default DishDetail;

Answer 1

问题出在以下事实：您props.dish的props.dish.comments的<RenderComments comments={props.dish.comments}/>部分的评估结果为

未定义

[我看到您将道具传递给

DishDetail

组件，但是我看不到您的代码摘录中使用了[[DishDetail组件的地方。通常，您应该在代码中的某个位置（您希望它出现的位置）使用组件DishDetail，并像上面那样传递道具

<DishDetail dish={theDishToPassToDishDetail} />

此外，请尽最大努力坚持一种定义功能组件的方法。使用常规函数或箭头函数。