首页 > 解决方案 > 更新的问题:this.props 显示无法读取未定义错误的属性“地图”

问题描述

我正在研究这个反应应用程序,在我现有的组件菜单中添加了一个新组件 DishDetail 后,不知何故 super(props) 停止工作,现在显示一个删除线,当我在 yarn 中启动我的反应应用程序时,它显示道具错误没有通过。

菜单组件

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

class Menu extends Component {

    constructor(props) {
        super();
        console.log(props)
        this.state = {
            selectedDish: null
        }
    }

    onDishSelect(dish) {
        this.setState({ selectedDish: dish});
    }

    renderDish(dish) {
        if (dish != null)
            return(
                <Card>
                    <CardImg top src={dish.image} alt={dish.name} />
                    <CardBody>
                      <CardTitle>{dish.name}</CardTitle>
                      <CardText>{dish.description}</CardText>
                    </CardBody>
                </Card>
            );
        else
            return(
                <div></div>
            );
    }

    render() {
        const menu = this.props.dishes.map((dish) => {
            return (
              <div  className="col-12 col-md-5 m-1">
                <Card key={dish.id}
                   onClick={() => this.onDishSelect(dish)}>
                  <CardImg width="100%" src={dish.image} alt={dish.name} />
                  <CardImgOverlay>
                      <CardTitle>{dish.name}</CardTitle>
                  </CardImgOverlay>
                </Card>
              </div>
            );
        });

        return (
            <div className="container">
                <div className="row">
                    {menu}
                </div>
                
                <DishDetail dish={this.state.selectedDish} />

            </div>
        );
    }
}
export default Menu;

上一页:我无法解决问题,因为除了超级删除线之外,我的 Visual Studio 代码中没有检测到错误,所以请帮助我了解错误在哪里以及出了什么问题?

更新代码:自 2020 年 8 月的反应版本不再支持以来,将 super(props) 更改为 super()

**更新部分:** 我已经更新了我的代码,但它显示无法读取const menu = this.props.dishes.map((dish) =>菜单组件中未定义错误的属性“映射”,我无法跟踪。

标签: javascriptreactjs

解决方案


推荐阅读