在 React 中如何修复这个 TypeError？

Question

我很挣扎，需要帮助！我对 React 非常陌生 - 我正忙着为我正在学习它的课程做这个练习作业，但我运行同样一遍又一遍的问题，我似乎无法正确解决。

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

我不断收到错误：类型错误：无法读取未定义的属性 'map'

Full Source Code Here: https://github.com/christinec-dev/react_new

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

任务 1：

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

任务 2：

使用Card组件显示菜品详情

任务 3：

在菜品详情视图中包含了关于菜品的评论列表。

----------------------------------------- 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.comments 或 this.props.dishes 未定义。

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

基本上加个检查确保this.props.comments和this.props.dishes存在并且是数组，也可以加个loader也可以加个问题点this.props.comments?.map( ...和 this.props.dishes?.map(...

Answer 2

看了一些文档，我自己解决了。结果我不得不从 menuComponent.js 文件中删除 renderDish(dish) 函数并将其放在 DishdetailComponent.js 文件中。

解决

TypeError: Cannot read property 'map' of undefined problem

我做了以下事情：

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

在 React 中如何修复这个 TypeError？

How Do I Fix This TypeError In React?

reactjs

jsx

reactstrap