類型錯誤：無法將 undefined 或 null 轉換為對象

Question

我是這里的初學者，我正在學習 udemy 的一些反應課程，雖然一切都運行良好，我的所有文件都由我自己與講師進行了雙重檢查，但此時它拋出了一個我無法做到的錯誤弄清楚。

如下所示拋出錯誤。

 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 |    });

漢堡.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; 

代碼與講師相同，但拋出上述錯誤。

其他兩個文件粘貼在下面

漢堡建造者.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

有同樣的問題！

在burgerbuilder.js中，確保將傳遞的成分返回到burger組件中：

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

Answer 2

對於收到此錯誤的人，還要檢查您是否在 BurgerIngredients.js 而不是 BurgerBuilder.js 中聲明了您的狀態

晚點再謝我。