反应：TypeError：无法读取 null 的属性“菜”

Question

I'm pretty new to React and trying to make a project. However, when I compile, I get an error. I'm trying to pass the Component on DishdetailComponent to MenuComponent, and the MenuComponent to App.js. It works when I pass DishDetail to App.js, but it gives an error when I try to pass DishDetail to Menu to App.js. The error message occurs on MenuComponent.js, line: 12. Here's my code:

DishdetailComponent.js:

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

class DishDetail extends Component {

    constructor(props) {
        super(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>
                <div className="row">
                  <div  className="col-12 col-md-5 m-1">
                    {this.renderDish(this.state.selectedDish)}
                  </div>
                </div>
            </div>
        );
    }
  }

export default DishDetail;

MenuComponent.js:

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

class Menu extends Component {

  constructor(props) {
    super(props);
  }
  render() {
    return <DishDetail dishes = {this.state.dishes} />;
  }
}

export default Menu;

Answer 1

You are using {this.state.dishes} in MenuComponent.js. But there are no states defined inside the component. I think you are passing down the dishes from App.js to MenuComponent.js. If that's the case, you should use {this.props.dishes} as shown below:

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

    class Menu extends Component {
    
      constructor(props) {
        super(props);
      }
      render() {
        return <DishDetail dishes = {this.props.dishes} />;
      }
    }
    
    export default Menu;

Also is this the React course from Coursera? I did the same course as well. It's great for beginners.

Answer 2

The problem is that you don´t have the dishes state on MenuComponent.js, you should create it and then pass it to the DishDetail component.

Example on MenuComponent.js:

this.state = {dishes: ['plate', 'glass']}

Answer 3

the problem is you are sending nothing in the return <DishDetail dishes = {this.state.dishes} />; of menuComponent.

what you need to do is set the value for dishes

try this:

 class Menu extends Component {

  constructor(props) {
    super(props);
   this.state = {
            dishes: ["abc","xyz"]
        }
  }
  render() {
    return <DishDetail dishes = {this.state.dishes} />;
  }
}