如何在 React 中修复此类型错误？

Question

我很挣扎，需要帮助！我对 React 非常陌生 - 我正忙于为我正在学习的课程做这个练习作业，但我一遍又一遍地遇到同样的问题而且我似乎做错了。

我不需要你完成我的任务，但我的代码上的任何提示或指示/反馈我哪里出错了我做错了什么将不胜感激。哎呀，我已经厌倦了在 Google/论坛上找不到解决方案，而且我的 React 技能相当新手，所以如果没有一些超级酷的 React 专家的帮助，我无法真正确定问题所在！非常感谢您提前。 :)

我不断收到错误：TypeError: Cannot read property 'map' of undefined

完整的源代码在这里： https://github.com/christinec-dev/react_new

我的应用程序的总体最终目标如下（出于透视原因在此添加）：

任务 1：

• 一个新的 DishdetailComponent 已添加到您的 React 应用程序中。
• 将 DishDetail 包含到 MenuComponent 的视图中以显示所选菜肴。
• 将所选菜肴作为道具传递给 DishDetail 组件。
• 对卡片使用了适当的 Bootstrap 类，使其占据 xs 和 sm 屏幕尺寸的整行，以及 md 及以上屏幕尺寸的 5 列。
• 对包含 cmets 列表的 div 使用了适当的 Bootstrap 类，以便它占据 xs 和 sm 屏幕尺寸的整行，以及 md 及以上屏幕尺寸的 5 列。

任务 2：

• 使用 Card 组件显示菜肴的详细信息。

任务 3：

• 在菜肴详细信息视图中包含有关菜肴的 cmets 列表。

----------------------------------------- menuComponent.js

//package imports
import React, { Component } from 'react';
//import bootrap components from reactstrap library
//NOTE: The media query returns a CSS style 
import { Card, CardImgOverlay, CardImg, CardBody, CardText, CardTitle  } from 'reactstrap';
import DishDetail from './DishdetailComponent';


//creates Menu component
class Menu extends Component {
    
    //define a constructor for it
    constructor(props) {

        //Props is read-only and are used to pass data, whereas state is for managing data and can be modified by its own component

        //required when you create a component in react
        super(props);
        
        //when document is loaded no card has been selected by default
        this.state = {
            selectedDish: null
        };
    }

    //when dishg is clicked, it will render details of dish
    onDishSelect(dish) {
        this.setState({selectedDish: dish});
    }

   //if dish is clicked it will show card details, else nothing
   renderDish(dish) {
    if(dish != null) {
        return(
        <Card>
            <CardImg width="100%" src={dish.image} alt={dish.name} />
                <CardBody>
                    <CardTitle>{dish.name}</CardTitle>
                    <CardText>{dish.description}</CardText>
                </CardBody>
        </Card>
        );
        } else {
            return(
                <div></div>
            )
        }
    }
    
    //return a value or function that will be called
    render() {

        //will iterate (map) over the dishes list and return each key (item) uniquely
        const menu = this.props.dishes.map((dish) => {
            // This will create the layout of the menu items by displaying the image, name and -description- of each menu item
            return (
                <div key={dish.id} className="col-12 col-md-5 m-1">
                      {/* When clicked on, it will run event function*/} 
                      <Card onClick={() => this.onDishSelect(dish.id, dish.comments)}>
                            <CardImg width="100%" src={dish.image} alt={dish.name} />

                            <CardImgOverlay body className="ml-5">
                                <CardTitle>{dish.name}</CardTitle>
                            </CardImgOverlay>
                        </Card>
                </div>
            );
        });

        return (
        //This will return a menu list that will be defined
        <div className="container">
            <div className="row">
                 {/* This will return the menu items */}             
                    {menu}
            </div>
            <div className="row">
                 {/* This will return the clicked card dish items when clicked */} 
                 <div className="col-12 col-md-5 m-1">          
                    {this.renderDish(this.state.selectedDish)},
                </div> 
                <div className="col-12 col-md-5 m-1">          
                    <DishDetail dishes={this.state.dishes} />
                </div>  
            </div>
        </div>
        );
    }
}

//exports it for use in other files
export default Menu;

-------------------DishdetailComponent.js

//package imports
import React, { Component } from 'react';
//import bootrap components from reactstrap library
//NOTE: The media query returns a CSS style 


//creates Dishdetail component
class DishDetail extends Component {
    
    //define a constructor for it
    constructor(props) {
        //Props is read-only and are used to pass data, whereas state is for managing data and can be modified by its own component

        //required when you create a component in react
        super(props);
        
        //when document is loaded no card has been selected by default
        this.state = {
            selectedDish: null,
            comments: null
        };
    }

    onDishSelect(comments) {
        this.setState({comments: comments});
    }

   //if dish is clicked it will show card comments, else nothing
   
    renderComments(comments) {
        if (comments != null){
                return (
                        <ul key={comments.id} className="list-unstyled">
                            <li className="comment">{comments.comment}</li>
                            <li className="author"> {comments.author}</li>
                            <li className="date"> {comments.date}</li>
                        </ul>   
                )       
        }
        else {
            return(
                <div></div>
            )
        }
    }

    //return a value or function that will be called
    render() {

    //will iterate (map) over the dishes list and return each key (item) uniquely
    const details = this.props.comments.map((comments) => {
            return (         
                <div className="container">
                    <div className="row">  
                    <div className="col-12 col-md-5 m-1">
                        <h4>Comments</h4>
                        <div>{comments}</div>  
                    </div>
                    </div>
                </div>
        );
    });

    return (
        //This will return a menu list that will be defined
        <div className="container">
            <div className="row">
                 {/* This will return the menu items */}             
                    {details}
            </div>
            <div className="row">
                 {/* This will return the clicked card dish items when clicked */}             
                 {this.renderComments(this.state.selectedDish)},
            </div>
        </div>
        );
    }
}
  

      
//exports it for use in other files
export default DishDetail;

----------------------------------------- App.js

//package and component imports
import logo from './logo.svg';
import React, {Component} from 'react';
import { NavbarBrand, Navbar } from 'reactstrap';
import Menu from './components/menuComponent';
import DishDetail from './components/DishdetailComponent';

import './App.css';
import {DISHES} from './shared/dishes';

//creates Menu component
class App extends Component {
    
  //define a constructor for it
  constructor (props) {

    //Props is read-only and are used to pass data, whereas state is for managing data and can be modified by its own component

    //required when you create a component in react
    super(props);

   
    //when document is loaded no card has been selected by default
        this.state = {
          dishes: DISHES,
          selectedDish: null,
          comments: null
      };
  }

  //when dishg is clicked, it will render details of dish
  onDishSelect(dish) {
      this.setState({ selectedDish: dish});
      
  }


  render () {
    return (    
    //To create html structures in React we always define it via the className strucutre
    <div>
      
      {/* This will create a layour based on our individual component files. For example, if we have a navbarComponent file, then we just import it from there and insert it here, without having to code the whole thing. */}
      <Navbar color="primary" dark expand="md">
        <div className="container">
        <NavbarBrand href="/"> Ristorante Con Fusion</NavbarBrand>
        </div>
      </Navbar>
  
     {/* The Menu component from the menuComponent.js file is rendered here and displayed when the index.js is loaded */}
     <Menu dishes={this.state.dishes} />
    </div>
  );
  }
}

//exports it for use in other files
export default App;

Answer 1

错误很清楚，this.props.cmets 或 this.props.dishes 未定义。

您正在尝试访问未定义元素的属性 .map。

基本上添加检查以确保 this.props.cmets 和 this.props.dishes 存在并且是数组，或者您可以添加加载器或者您可以添加问题点 this.props.cmets?.map(.. . and this.props.disses?.map(...

Answer 2

在阅读了一些文档后，我能够自己解决它。事实证明，我必须从 menuComponent.js 文件中删除 renderDish(dish) 函数并将其放入 DishdetailComponent.js 文件中。

解决问题

TypeError: 无法读取未定义问题的属性“地图”

我做了以下事情：

 //if dish is clicked it will show dish comments, else nothing
renderComments(array) {
    //if dish array is not equal to null, display comments in half grid
    if (array.length != 0) {
        return (
            //col-12 for sm and xs, and col-5 for md and lg screens with margin @ 1
            <div className="col-12 col-md-5 m-1">
                {/* Displays the comment title, and details of author, date and comment */}
                <h4>Comments</h4>                  
                {/* //will iterate (map) over the comments list and return each key (item) uniquely */}
                { array.map (comment => (
                    <ul className="list-unstyled">
                        <li>
                            <p>{comment.comment}</p>
                            <p><i> - {comment.author} </i>, {comment.date}</p>
                        </li>
                    </ul>
                ))
                }
            </div>
        );
    }
    //if the dish contains nothing, show nothing
    else {
        return (
            <div></div>
        );

    }
}

Answer 3

src\App.js Line 4:8: 'DishDetail' is defined but never used no-unused-vars

搜索关键字以了解有关每个警告的更多信息。 要忽略，请添加// eslint-disable-next-line to the line before。