类型错误：无法将 undefined 或 null 转换为对象

Question

I'm a beginner here and i was working with some react course from udemy and while everything was working perfect and fine and all my files are double checked with the instructor by myself but at this point it is throwing an error which i'm unable to figure out.

the error is thrown as shown below.

 6 |    const transformedIngredients = Object.keys(props.ingredients)
   7 |    .map(igKey => {
   8 |        return [...Array(props.ingredients[igKey])].map((_, i) => {
>  9 |           return <BurgerIngredient key={igKey + i} type={igKey} />;
     |                 ^  
  11 |        });
  12 |    });

burger.js

import React from 'react';
import classes from './Burger.css';
import BurgerIngredient from './BurgerIngredient/BurgerIngredient';

const burger = (props) => {
    const transformedIngredients = Object.keys(props.ingredients)
    .map(igKey => {
        return [...Array(props.ingredients[igKey])].map((_, i) => {
           return <BurgerIngredient key={igKey + i} type={igKey} />;

        });
    });
    return (
    <div className ={classes.Burger}>
        <BurgerIngredient type="bread-top" />
       {transformedIngredients}
        <BurgerIngredient type="bread-bottom" />
    </div>
    );
};

export default burger; 

the code is same as the instructor but throwing above error.

other two files are pasted below

burgerbuilder.js

import React, { Component } from 'react';
import Auxy from '../../Hoc/Auxy'; 
import Burger from '../../components/Burger/Burger';

class BurgerBuilder extends Component {

    state = {
        ingredients: {
            salad: 1,
            bacon: 1,
            meat: 1,
            cheese: 2

        }
    }
    render() {
        return ( 
            <Auxy>
                 <Burger />
                <div>Build Controls </div>

            </Auxy>
        );
    }
}
export default BurgerBuilder;

burgeringredient.js

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import classes from './BurgerIngredient.css';

class BurgerIngredient extends Component {
    render () {

        let ingredient = null;
        switch (this.props.type){
        case ('bread-bottom'):
        ingredient = <div className={classes.BreadBottom}></div>;
        break;
        case ('bread-top'):
        ingredient = (
            <div className={classes.BreadTop}>
            <div className={classes.Seeds1}></div>
            <div className={classes.Seeds2}></div>
            </div>
        );
        break;
        case ('meat'):
        ingredient =<div className={classes.Meat}></div>;
        break;
        case ('cheese'):
        ingredient =<div className={classes.Cheese}></div>;
        break;
        case ('bacon'):
        ingredient =<div className={classes.Bacon}></div>;
        break;
        case ('salad'):
        ingredient =<div className={classes.Salad}></div>;
        break;
        default:
        ingredient =null;
    }
    return ingredient;

    }
} 

BurgerIngredient.propTypes={
    type: PropTypes.string.isRequired
};

export default BurgerIngredient;

Answer 1

Had the same issue!

in burgerbuilder.js make sure to return pass ingredients into the burger component:

             <Burger ingredients={this.state.ingredients} />

Answer 2

For people who get this error, also check if you have declared your state in BurgerIngredients.js instead of BurgerBuilder.js

Thank me later.